2013-06-03 44 views
0

我試圖定義一個指令,以便在問題得到解答時顯示覆選標記。在指令模板中使用ng-show

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

回答

2

這不是定義指令範圍的有效方法:

scope: '@' 

您可以(一)沒有定義它,(二)將其設置爲true,或(c)將其設置爲{}(一個對象)。查看文檔的更多信息:http://docs.angularjs.org/guide/directive(找到頭:「指令定義對象」)

在這種情況下,我想,如果你刪除它,你可能是好的,因爲它將使scope.questions從你的指令可見。如果您在jsfiddle.netplnkr.co中重現該問題,那麼協助您將容易得多。

編輯:

  1. 你的指令,通常應該有1個父元素
  2. 你不應該在你的指令的HTML使用scope,它暗示
  3. 我想你在您的評論的不多說了,但你應該努力通過傳遞scope.questions [0] [0] .done來使你的指令更通用,而不是用你的指令的HTML使用屬性來查找它。

這裏有一個工作示例:http://jsfiddle.net/EZy2F/1/

+0

謝謝,但我刪除,並沒有什麼改變。我認爲這樣做可以讓指令的各個實例成爲他們自己的範圍,而不是在指令的所有副本中共享一個範圍。 –

+0

啊,我明白了。你不應該在模板中使用'scope' ......它暗示着:http://jsfiddle.net/EZy2F/1/ – Langdon

+0

謝謝...我還能夠構建一個可用的JSFiddle(http:// jsfiddle .net/nicolethenerd/3U5WF /) - 不幸的是,我仍然不知道我實際項目中的代碼有什麼問題。 –