我正在尝试创建一个需要使用单独 Controller 的自定义指令,因为它需要具有可由子指令调用的函数。
这是迄今为止我的代码:
angular.module('myDirectives').controller('SlideInMenuController', function ($scope, $element, $attrs) {
$scope.isOpen = false;
// Toggle Function
this.toggle = function(){
$scope.$apply(function(){
$scope.isOpen = !$scope.isOpen;
});
};
// Watch $scope.isOpen and open the menu
$scope.$watch('isOpen', function() {
if($scope.isOpen == true){
$element.attr('is-open', true);
}
else{
$element.attr('is-open', false);
}
return false;
});
}
angular.module('myDirectives').directive('slideInMenu', function ($swipe) {
return {
restrict: 'EA',
scope: {},
controller:'SlideInMenuController'
};
});
angular.module('myDirectives').directive('slideInMenuToggle', function ($swipe) {
return {
restrict: 'EA',
require: '^slideInMenu',
link: function ($scope, $element, $attrs, SlideInMenuCtrl) {
$element.bind('click', function(){
SlideInMenuCtrl.toggle();
});
}
};
});
(注意:我正在使用 ng-annotate,因此我不必将所有依赖项写入两次)
我需要将 $swipe 服务注入(inject)指令 Controller ,但普通 Controller 不会将 $scope、$element、$attrs 作为前三个参数。这让我想知道我是否应该将它们放入链接函数中并在那里执行 DOM 操作,但是如果我这样做, Controller 中的内容以及链接函数中的内容。
我读过很多博客和 SO 答案,它们说明了编译/链接/ Controller 运行的顺序,但仍然找不到关于我上面的示例中的内容应该去哪里的明确答案。
任何帮助将不胜感激。
最佳答案
AngularJS 有两种函数。这两个都不是直接调用的。
1) 可注入(inject):接收参数的函数,其名称必须(有少数异常(exception))在依赖注入(inject)子系统中注册。 这就是 ng-annotate 存在的原因。您还可以使用数组表示法。
angular.module('stackOverflow').service('answer', ['myService', function(myService) {
...
}]);
一些示例是传递给 angular.module()
函数的示例,例如 service()
、factory()
、指令()
、 Controller ()
。
2) 简单函数。这些没有特殊处理,它是普通的 JavaScript。它们被传递到指令定义对象中的链接和编译槽。
如果您不需要最右边的参数,则可以省略它们,但不能省略其他参数。由于参数的顺序是固定的,因此您无法重新排序它们。但是您可以随意调用它们。
这就是函数的内容。
关于使用 $ 的约定:小心! AngularJS 内置服务以 $ 为前缀,因此您应该以这种方式为可注入(inject)函数命名参数。对于所有其他情况,不要以 $ 为前缀:您自己的函数和位置参数,就像您在 link() 和compile() 中看到的那样。 在这些函数中使用 $ 前缀会产生误导和不好的指导。
为了更好地区分compile()和link的参数,您可以为模板添加t
前缀,例如添加i
前缀。现在我更喜欢使用那些没有前缀的。最好移动它们。
compile: function (tElement, tAttrs) {
return function link(scope, iElement, iAttrs, ctrls) {
};
}
关于javascript - 将哪些参数传递到 Angular JS 自定义指令 Controller ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29630797/