0

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

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)

4

1 回答 1

2

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

scope: '@'

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

在这种情况下，我想如果你删除它，你可能会没事，因为它scope.questions可以从你的指令中看到。如果您在jsfiddle.net或plnkr.co中重现该问题，那么为您提供帮助会容易得多。

编辑：

  1. 您的指令通常应该有 1 个父元素
  2. 您不应该scope在指令的 HTML 中使用，这是暗示的
  3. 我认为您在评论中说了很多，但是您应该努力通过传入 scope.questions[0][0].done 来使您的指令更通用，而不是使用属性在指令的 HTML 中查找它。

这是一个工作示例：http: //jsfiddle.net/EZy2F/1/

于 2013-06-03T18:20:51.193 回答