Javascript AngularJS 指令不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14326077/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS Directives not working
提问by Pedro M. Silva
I'm using AngularJS in a project of mine, and I wanted to try creating directives. I already followed several tutorials and I can't see where I'm doing it wrong. Even worst, it doesn't shows up any error or warning message, but it also does not executes the directive's function. Right now, my code is pretty much this:
我在我的一个项目中使用 AngularJS，我想尝试创建指令。我已经学习了几个教程，但我看不出我哪里做错了。更糟糕的是，它不会显示任何错误或警告消息，但它也不会执行指令的功能。现在，我的代码几乎是这样的：
angular.module('components', []).directive('ngxOnshow', function() {
return {
restrict: 'A',
link: function(scope, element, attrs){
console.log("hello world")
//Resto do código da fun??o
}
};
});
var module = angular.module('app', ['components']);
In the body of the HTML page I have this:
在 HTML 页面的正文中，我有这个：
<body ng-autobind ng-app="app">
But then, when I use the directive, it does not work.
但是，当我使用该指令时，它不起作用。
<div ng-show="showApp == true" ngx-onshow="showAppBar()">
</div>
The rest of the application works just fine, the bindings, the default directives, everything except this. Perhaps I'm missing something?
应用程序的其余部分工作得很好，绑定，默认指令，除此之外的所有内容。也许我错过了什么？
Thanks, Scorch :)
谢谢，焦灼:)
回答by Mark Rajcok
Use '&' to allow a directive to execute an expression/function defined in the parent scope. $observe an interpolated isolate scope attribute (i.e., one defined with '@' that contains {{}}) to determine when it changes:
使用“&”允许指令执行在父作用域中定义的表达式/函数。$observe 一个内插的隔离范围属性（即，一个用 '@' 定义的包含{{}}）来确定它何时发生变化：
myApp.directive('ngxOnshow', function () {
return {
restrict: 'A',
scope: {
showApp: '@',
ngxOnshow: '&'
},
link: function (scope, element, attrs) {
console.log("inside link function")
attrs.$observe('showApp', function (newValue) {
newValue === "true" && scope.ngxOnshow()
})
}
};
});
newValue is compared with "true"not truebecause interpolated values are always strings.
newValue 与"true"not进行比较，true因为内插值始终是字符串。
HTML:
HTML：
<div ng-show="showApp == true" show-app="{{showApp}}" ngx-Onshow="showAppBar()">
小提琴。
回答by setec
Most of directive errors are displayed in the console, just enable logging:
大多数指令错误都显示在控制台中，只需启用日志记录：
app.config(function($logProvider){
$logProvider.debugEnabled(true);
});
Thus you'd have no need to guess why directive is't working.
因此，您无需猜测为什么指令不起作用。
回答by asgoth
I don't really know what the directive should do, because all you have is a console.log. But since you pass a function to the ngxOnshowargument, I suppose you want to execute it. You need to tell the directive to execute the function from the parent with scopeset to &:
我真的不知道指令应该做什么，因为你所拥有的只是一个console.log. 但是由于您将函数传递给ngxOnshow参数，我想您想执行它。您需要通过scopeset to告诉指令从父级执行函数&：
angular.module('components', []).directive('ngxOnshow', function() {
return {
restrict: 'A',
scope: {
ngxOnshow: '&'
},
link: function(scope, element, attrs){
console.log("hello world")
//Resto do código da fun??o
}
};
});
