我创建module1
并module2
在一个页面中。module1
工作正常,module2
不工作。请建议如何在单个页面中正确module1
调用。module2
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var mymodule1 = angular.module('module1', []);
mymodule1.directive('btnDirective', function() {
return {
restrict: 'E',
template: '<table>' +
'<tr><td>Enter a value:<input type="text" ng-model="a" /></td></tr>' +
'<tr><td>Enter b Value:<input type="text" ng-model="b" /></td></tr>' +
'<tr><td><button ng-click="add(a,b)">Add</button></td></tr>' +
'<tr><td>Sum of two number {{sum}}</td></tr>' +
'</table>',
link: function($scope, element, attrs) {
$scope.sum = 0;
$scope.add = function(a, b) {
$scope.sum = parseInt(a) + parseInt(b);
}
}
};
});
var mymodule2 = angular.module('module2', []);
mymodule2.controller('controller2', function($scope) {
$scope.name = 'Second Module Controller!';
});
angular.bootstrap(document.getElementById("app2"), ['module2']);
</script>
</head>
<body>
<h3>Creating Custom Element Directive</h3>
<br />
<div ng-app="module1">
<btn-directive></btn-directive>
</div>
<h1>my module2</h1>
<div id="app2" ng-app="module2" ng-controller="controller2">
Name: {{name}}
</div>
</body>
</html>