Angular Directive，自读未成功，console.log无法正常工作
[英]Angular Directive, argument not beign read and console.log not working
问题描述
i'm trying to make this directive work, the goal is to read a JSON object that comes with the menues text to display, according to it the tabs will fill with other directives. 
我正在尝试使该指令有效，目标是读取菜单文本以显示的JSON对象，根据该选项卡，选项卡将填充其他指令。
HTML 的HTML
<lista-tabs myMenues="general.sectionsList"></lista-tabs>
JS JS
app.directive('listaTabs', function() {
return {
restrict: 'E',
scope: {
myMenues: '@',
},
link: function(scope, element, attrs) {
console.log("Inside link function");
console.log(myMenues);
},
};
});
The other directives work just fine. 其他指令也可以。 I need to analyze that JSON object and according to it, assemble the menu, that won't be a problem once I get this working. 我需要分析该JSON对象，并根据它组装菜单，一旦我开始工作就不会有问题。 But console.log is not showing anything, not even that plain text. 但是console.log没有显示任何内容，甚至没有显示纯文本。 The alert method works fine. 警报方法可以正常工作。
I have the console.log plugin for phonegap installed and works in other parts of the project. 我已经安装了用于phonegap的console.log插件，并且可以在项目的其他部分工作。
BTW: I'm working in phonegap with tw bootstrap. 顺便说一句：我正在用tw bootstrap进行phonegap。
Thanks in advance! 提前致谢！
2 个解决方案
解决方案1
2 已采纳 2015-04-09 15:32:46
All angular directives need to be dash delimitted and i understand from your code that you want to bind this to an object to not a string, also you forgat to use scope on myMenues attr, here working example: 所有的角度指令都必须用短划线分隔，并且我从您的代码中了解到，您希望将此对象绑定到一个对象而不是字符串，您也要在myMenues attr上使用作用域，这里是工作示例：
var app = angular.module('stack', []); app.controller('MainCtrl', function($scope) { $scope.general = { sectionsList: 'someText' } }); app.directive('listaTabs', function() { return { restrict: 'E', scope: { myMenues: '=', }, link: function(scope, element, attrs) { console.log("Inside link function"); alert(scope.myMenues); }, }; });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> <body ng-app="stack" ng-controller="MainCtrl"> <lista-tabs my-menues="general.sectionsList"></lista-tabs> </body>
解决方案2
1 2015-04-09 15:26:34
The attributes of your directive (in the HTML) follow the same angular normalization . 指令的属性（在HTML中） 遵循相同的角度归一化 。 This means that they must be dash-delimitted just like the directive name. 这意味着它们必须与指令名称一样用短划线分隔。
<lista-tabs my-menues="general.sectionsList"></lista-tabs>
On another note, in your link function, you refer to a variable myMenues , which is not defined anywhere. 另一个需要注意的是，在链接函数中，您引用的变量myMenues并未在任何地方定义。 Remember that myMenues is a property of your scope object you defined above. You should be using 请记住， myMenues is a property of your object you defined above. You should be using myMenues is a property of your范围object you defined above. You should be using myMenues is a property of your object you defined above. You should be using object you defined above. You should be using scope.myMenues`. object you defined above. You should be using scope.myMenues`。
Finally, you are currently using the @ binding, which is meant to bind to DOM strings. 最后，您当前正在使用@绑定，该绑定旨在绑定到DOM字符串。 If you actually want objects, you need to use either two-way = binding or a one-way expression binding ( & ). 如果确实需要对象，则需要使用双向=绑定或单向表达式绑定（ & ）。 See the documentation for directive definitions . 有关指令定义，请参见文档 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.