问题:
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<body>
<p>Change the value of the input...
可以将文章内容翻译成中文,广告屏蔽插件会导致该功能失效:
问题:
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<body>
<p>Change the value of the input field:</p>
<div ng-app="" ng-init="myCol=''">
<input style="background-color:{{myCol}}" ng-model="myCol">
</div>
<div id="secondApp" ng-init="myCo=''">
<input style="background-color:{{myCo}}" ng-model="myCo">
</div>
<p>AngularJS resolves the expression and returns the result.</p>
<p>The background color of the input box will be whatever you write in the input field.</p>
<script type="text/javascript">
var secondDiv = document.getElementById('secondApp');
angular.element(document).ready(function() {
angular.bootstrap(secondDiv, [ 'secondApp' ]);
});
</script>
</body>
</html>
Here is my code. The first input field works perfectly but the second input field is not working even I use bootstrap. Please anyone show me the right way to do it. Thanks
回答1:
Ajinkya pointed you in the right direction... going on from there:
var firstApp = angular.module("firstApp", []);
var secondApp = angular.module("secondApp", []);
firstApp.controller("faController", function($scope) {});
secondApp.controller("saController", function($scope) {});
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById("firstApp"), ['firstApp']);
angular.bootstrap(document.getElementById("secondApp"), ['secondApp']);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<p>Change the value of the input field:</p>
<div id="firstApp" ng-controller="faController" ng-init="myCol='lightblue'">
<input style="background-color:{{myCol}}" ng-model="myCol">
</div>
<div id="secondApp" ng-controller="saController" ng-init="myColor2='lightpink'">
<input style="background-color:{{myColor2}}" ng-model="myColor2">
</div>
<p>AngularJS resolves the expression and returns the result.</p>
<p>The background color of the input box will be whatever you write in the input field.</p>
回答2:
This question already had an answer:
bootstrap to use multiple ng-app
Please refer and make changes to your code accordingly.