使用Angular表達式插入指令

Question

有沒有什麼方法可以實現我在這fiddle中要做的事情？

我想使用Angular表達式向元素添加指令。

例子：

<div {{hello}}></div> 

Answer 1

你需要插入DIV控制器內部而不是在HTML標記，以動態地創建指令。在這裏，我使用$compile服務來根據範圍變量hello動態生成指令。

控制器代碼：

function MainCtrl($scope, $compile) { 
    $scope.flag = "disabled"; 
    $scope.hello = "hello"; 
    var el = $compile("<div " + $scope.hello + "></div>")($scope); 
    var element = angular.element(document.querySelector('#mainID')); 
    element.append(el); 
} 

Working Fiddle

Answer 2

我能看到的想法，但我不知道這是來聲明元素的適當位置。我會堅持按類型分開屬性，或者像@ V31那樣根據指令創建元素，雖然他的示例似乎只是在指令編譯後創建了一個元素，但我認爲在這之後您需要重新編譯您的指令。而且我覺得你的指示的真正的力量，用它的來處理這些事件和維護範圍能力等

我會堅持的屬性來聲明不同的元素類型，這樣的事情 -

Fiddle

restrict: "EA", 
    scope: { 
     ngModel: "=", 
     type: "@" 
    }, 
    link: function (scope, el, attrs) { ... 

另外ng-disabled已經有一個屬性。

ng-disabled="{{flag}}"