如何動態綁定angularjs中的指令？

我有一個指令，需要顯示控制器中的對象的數據。必須顯示的數據片段由指令的屬性以及基於其他dom元素的其他計算來確定。如何動態綁定angularjs中的指令？

這裏是一個簡化的例子。

我有這樣的數據：

app.controller('EditorCtrl', function($scope) { 
    $scope.blocks = { 
     header: 'text1', 
     body: 'text2', 
    }; 
});

而且我希望它可以顯示與該指令：

app.directive('editable', function() { 
    return { 
     template: 'data: {{val}}', 
     link: function(scope, element, attrs) { 
      element.wrap('<div class="editable"></div>'); 
      data = scope.blocks[attrs.editable]; 
      val = data; 
     } 
    } 
});

而在HTML：

<h1 editable="header">text1 should be displayed here</h1> 
<h1 editable="body">text2 should be displayed here</h1>

我怎樣才能做到這一點？我是否正確地處理了這個問題？

來源

2013-05-13 Antonio Madonna

這看起來確實在第一眼 - 你可以創建一個笨蛋，看看你是否重新創建它？ – 2013-05-13 15:32:56

指令中的'data：{{val}}'指令期望在範圍中定義「val」（並且它不是）。

您可以使用「scope：true」創建一個本地範圍來保存val變量。（見http://docs.angularjs.org/guide/directive範圍部分）。

像這樣的工作：

app.directive('editable', function() { 
    return { 
     template: 'data: {{val}}', 
     scope: true, 
     link: function(scope, element, attrs) { 
      element.wrap('<div class="editable"></div>'); 
      data = scope.blocks[attrs.editable]; 
      scope.val = data; 
     } 
    } 
});

在AngularJS，小時候範圍prototypically從其父繼承的範圍，因此，即使你正在創建一個新的範圍，您仍可以訪問塊對象。

話雖如此，以前的解決方案會使父塊對象中的更改很難立即反映在DOM h1節點中。我反而，做這樣的事情：

<div ng-app="app" ng-controller="EditorCtrl"> 
    <h1 editable="blocks.header">text1 should be displayed here</h1> 
    <h1 editable="blocks.body">text2 should be displayed here</h1> 
</div>

和JS：

angular.module('app', []).controller('EditorCtrl', function($scope) { 
    $scope.blocks = { 
    header: 'text1', 
    body: 'text2', 
    }; 


}).directive('editable', function() { 
    return { 
    template: 'data: {{text}}', 
    scope: { 
     'text': '=editable' 
    }, 
    link: function(scope, element, attrs) { 
     element.wrap('<div class="editable"></div>'); 
    } 
    } 
});

隨着「文」：「=可編輯的」聲明範圍要設置本地之間的雙向綁定範圍文本變量和父級「blocks.header/body」（可編輯DOM屬性的內容）。塊變量中的任何更改都會自動反映在DOM中。

來源

2013-05-13 16:04:27

如何動態綁定angularjs中的指令？

回答

相關問題