rdg*_*dgd 12 javascript angularjs angularjs-directive
我希望能够在一个页面上使用多个ng-app ="{angular.module}"指令.我想这样做,以使我的应用程序的位更模块化.我想,如果我可以创建角度模块并将其中的几个插入到一个文档中,我可以将这些模块轻松插入到其他项目中.
我见过有人说你只能在页面上使用一个ng-app指令......这是真的吗？是否最准确地说,"每个视图一个ng-app指令"？
我希望情况并非如此,或者是否仍然是实现高度抽象模块化的最佳方式.
这是我的模块/应用程序及其控制器......
var searchModj = angular.module('searchModule', []);
var controllers = {};
controllers.SearchList = function ($scope){
$scope.coworkers = [
{name: 'Joe Bob', city: 'Ukrainia'},
{name: 'Adam Blobnovski', city: 'Logan' },
{name: 'Carlos Sanchez', city: 'Deerbushle'},
{name: 'Martin Kellerweller', city: 'Uptown'},
{name: 'John Doe', city: 'New York City'}
];
};
searchModj.controller(controllers);
var fruitModj = angular.module('fruiter', []);
controllers.SomeFruit = function ($scope) {
$scope.fruits = ['apple', 'banana', 'pear'];
};
fruitModj.controller(controllers);
好的,现在这里是我标记的相关部分......
<div ng-app="searchModule">
<div ng-controller="SearchList">
Name:
<br/>
<input type="text" ng-model="name" />
<br/>
<ul>
<li ng-repeat="coworker in coworkers | filter:name">{{ coworker.name }} - {{ coworker.city }}</li>
</ul>
<p>You are searching for <em>{{ name }}</em></p>
</div>
</div>
<div ng-app="fruiter">
<div ng-controller="SomeFruit">
<ul>
<li ng-repeat="fruit in fruits">{{ fruits }}</li>
</ul>
</div>
</div>
我认为因为它首先出现在文档中,我的"searchModule"应用程序正常运行,而第二个应用程序则没有.当我评论第一个应用程序时,第二个应用程序.所以看起来我确认了我最不幸的怀疑.无论如何......如果是这种情况,那么我能想到的最好的方法是什么才能使我的项目上的功能尽可能模块化？
cha*_*tfl 19
你只需要一个ng-app页面,但你可以插入其他模块作为主ng-app模块的依赖项.
var app=angular.module('myNgAppName', ['searchModule']);
这将暴露您的任何指令,控制器等 'searchModule'
该ngApp指令的局限性只是指令的局限性,而不是AngularJS本身.Angular允许您将模块与页面中的多个元素相关联,甚至允许您将多个模块与每个元素相关联.
从您的模块引用其他模块将起作用.另一种可行的angular.bootstrap()方法是使用该方法.请参阅:https://stackoverflow.com/a/18583329/984780
最后,您可以创建一个类似于ngApp没有限制的指令.它将完全按照它在标记代码中的方式工作.这就是我所做的,你可以在这里得到代码:
http://www.simplygoodcode.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/
该指令被调用ngModule.这是一个代码示例:
<!DOCTYPE html>
<html>
<head>
<script src="angular.js"></script>
<script src="angular.ng-modules.js"></script>
<script>
var moduleA = angular.module("MyModuleA", []);
moduleA.controller("MyControllerA", function($scope) {
$scope.name = "Bob A";
});
var moduleB = angular.module("MyModuleB", []);
moduleB.controller("MyControllerB", function($scope) {
$scope.name = "Steve B";
});
</script>
</head>
<body>
<div ng-modules="MyModuleA, MyModuleB">
<h1>Module A, B</h1>
<div ng-controller="MyControllerA">
{{name}}
</div>
<div ng-controller="MyControllerB">
{{name}}
</div>
</div>
<div ng-module="MyModuleB">
<h1>Just Module B</h1>
<div ng-controller="MyControllerB">
{{name}}
</div>
</div>
</body>
</html>
| 归档时间： |
|
| 查看次数： |
21240 次 |
| 最近记录： |