控制器在所有的指令间共享，因此指令可以将控制器当作通信通道（公共API），如果设置多个require，这个参数是一个控制器实例组成的数组，而不是一个单独的控制器。
问题剖析
在通过对AngularJS生命周期的理解，我们可以清晰地认识到动态菜单为什么绑定在链接阶段上的DOM操作没有成功，由于ng-repeat的原因，我对DOM树操作没找到DOM元素。因为在封装成一个菜单指令组件的时候，我内部的菜单数据加载使用ng-repeat实现，所以只有在这个时候才能在ng-repeat内部绑定对DOM树的操作。
最初的写法：
//html <menu-bar> ````` <div ng-repeat="ml in menuLists"> `````` <div ng-repeat="mls in ml.secondLists"> `````` <div ng-repeat="mlt in mls.thirdLists"> `````` </div> `````` </div> `````` </div> `````` </menu-bar> //directive angular.module('',[]).directive('menuBar',function (){ return { restrict: 'E', replace: true, link: function (scope, element, attr){ //操作菜单的逻辑代码 } } });
这种写法，在link里面操作菜单逻辑的代码没有被触发，尼玛，angularjs的检测机制也没用，因为ng-repeat的原因导致DOM操作事件没有被挂载到DOM上，所以想操作菜单不可能成功。但是，如果ng-repeat的内容是静态存在的，link函数里面的操作是可以实现的。
修改后的写法：
//html <div ng-repeat="ml in menuLists"> `````` <div ng-repeat="mls in ml.secondLists"> `````` <menu-bar> `````` <div ng-repeat="mlt in mls.thirdLists"> `````` <menu-bar> `````` </menu-bar> `````` </div> `````` </menu-bar> `````` </div> `````` </div> //directive angular.module('',[]).directive('menuBar',function (){ return { restrict: 'E', replace: true, link: function (scope, element, attr){ //操作菜单的逻辑代码 } } });
修改之后我们将我们操作动态加载的DOM结构的指令放入ng-repeat中，此时逻辑正常执行，在link函数中能打印出DOM结构。
以上所述是小编给大家介绍的AngularJS动态菜单操作指令，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: