Angular 指令，未读取参数且 console.log 无效

Question

我正在尝试使该指令起作用，目标是读取一个 JSON 对象，该对象随菜单文本一起显示，根据它，选项卡将填充其他指令。

HTML

<lista-tabs myMenues="general.sectionsList"></lista-tabs>

JS

app.directive('listaTabs', function() {
    return {
        restrict: 'E',
        scope: {
            myMenues: '@',
        },
        link: function(scope, element, attrs) {
            console.log("Inside link function");
            console.log(myMenues);
        },
    };
});

其他指令工作正常。我需要分析那个 JSON 对象，并根据它 assemble 菜单，一旦我开始工作，这就不是问题了。但是 console.log 没有显示任何内容，甚至没有显示纯文本。警报方法工作正常。

我安装了用于 phonegap 的 console.log 插件，并且可以在项目的其他部分使用。

顺便说一句：我正在使用 tw bootstrap 在 phonegap 工作。

提前致谢！

Answer 1

你的指令的属性（在HTML）follow the same angular normalization。这意味着它们必须像指令名称一样以破折号分隔。

<lista-tabs my-menues="general.sectionsList"></lista-tabs>

另一方面，在您的 link 函数中，您引用了一个未在任何地方定义的变量 myMenues。请记住 myMenues is a property of yourscopeobject you defined above. You should be usingscope.myMenues`.

最后，您目前正在使用 @ 绑定，这意味着绑定到 DOM 字符串。如果您确实需要对象，则需要使用双向 = 绑定或单向表达式绑定 (&)。见 documentation for directive definitions.

Answer 2

所有 angular 指令都需要用破折号分隔，我从你的代码中了解到你想将它绑定到一个对象而不是一个字符串，你也忘记了在 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>

Angular 指令，未读取参数且 console.log 无效

Angular Directive, argument not beign read and console.log not working

javascript

angularjs

angularjs-directive