Question

我正在尝试定义一个指令，以便在回答问题时显示复选标记。

questModule.directive('showCheckmarkOnDone', function () {
  return {
    transclude: true,
    template: "<div ng-transclude></div><img src='img/checkmark.svg' " +
        "ng-show='scope.questions[type][number-1].done' " + 
        "class='checkmark' style='height: {{height}}px; width: {{height}}px;'>",
    link: function (scope, element, attrs) {
      scope.height = $(".app").height()/12;
      scope.number = attrs.number;
      scope.type = attrs.type;
    }
  };
});

我的控制器中存在scope.questions[type][number-1].done页面，当我按下完成按钮时，我可以看到它正在正确更新。但是，该指令不会注册更改。我尝试在链接功能中添加$ watch - 这也没有帮助。我觉得我对如何让我的指令范围与我的控制器范围很好地混淆有点困惑 - 关于如何让这个指令访问外部控制器中存在的对象的任何想法？（scope.questions）

Answer 1

这不是定义指令范围的有效方法：

scope: '@'

您可以（a）不定义它，（b）将其设置为true，或者（c）将其设置为{}（对象）。有关详细信息，请参阅文档：http://docs.angularjs.org/guide/directive（查找标题：“指令定义对象”）

在这种情况下，我想如果你删除它，你可能没问题，因为它允许从你的指令中看到scope.questions。如果您在jsfiddle.net或plnkr.co中重现该问题，则可以更轻松地为您提供帮助。

编辑：

您的指令通常应该包含1个父元素
你不应该在你的指令的HTML中使用scope，这是隐含的
我认为你在评论中已经说了很多，但是你应该努力通过传入scope.questions [0] [0] .done来使你的指令更通用，而不是使用属性在你的指令的HTML中查找它。 / LI>
以下是一个有效的例子：http://jsfiddle.net/EZy2F/1/

在指令模板中使用ng-show

1 个答案: