如何從角度控制器插入指令到視圖中？

我在我的角度模塊中有一個自定義指令，我想動態地將其插入到我的視圖中，同時包含控制器內部函數的不同信息的多個實例也在模塊中..這是如何完成的？對於例子緣故here is a sample fiddle用來告訴我如何做到這一點如何從角度控制器插入指令到視圖中？

var myApp = angular.module('myApp',[]); 

myApp.directive('myDirective', function() { 
    return { 
     restrict: "E", 
     transclude: true, 
     template: "<div><h4>Hello, World!</h4></div>" 
    } 
}); 

function MyCtrl($scope) { 
    $scope.insertDir = function(){ 
     //???? 
    } 
}

來源

2014-10-03 alsco77

當你想到你的角度應用程序（和一般的，當你「想MVVM」），想象一下控制器改變應用程序的一些狀態 - 這是在角視圖模型或$scope - 儘量不當您設計您的控制器時，請考慮特定的視角。

然後，當您構建視圖時，請嘗試使視圖對應用程序的狀態（即$scope）作出反應。

保持這種分離，你的生活會更容易。

具體到你的問題。創建可「驅動」您的視圖的值（但視圖需要）。如果你的視圖想要基於這個值（或數組值）創建指令，那就這樣吧。它可以這樣做是這樣的：

假設你的控制器設置$scope.values，就像這樣：

.controller("MyCtrl", function ($scope) { 
    $scope.name = 'Superhero'; 
    $scope.values = ["AAA","BBB","CCC","DDD"]; 
})

那麼你的觀點可以這樣做：如果你想「加指令」

Hello, {{name}}! 
<my-directive ng-repeat="v in values">{{v}}</my-directive>

，再次考慮將值添加到您的$ scope.values中，而不是視圖的指令。例如，你可以在你的控制器功能能夠反應用戶的點擊這樣做：

$scope.addNewValue = function(){ 
    $scope.values.push("New Val: " + Math.random()); 
};

這是你更新fiddle。

來源

2014-10-03 15:03:20

@AlexScott的視圖，不確定爲什麼你沒有將此標記爲答案。 'ng-repeat'只是視圖決定如何渲染的一種方式。它可以很容易地使用'ng-if =「values [N]！== undefined」'並且將指令灑在任何你想要的地方。 – 2014-10-06 15:48:56

是的，我不是故意的 - 道歉 – alsco77 2014-10-07 08:04:43

使用ng-if。即<div ng-if="myDirectiveActive"> <my-directive></my-directive> </div>。只要myDirectiveActive標誌爲真，它會將div與您的指令一起插入到DOM樹中

來源

2014-10-03 13:53:44

即時通訊要添加多個這些指令包含從控制器加載的唯一數據。我真的不明白你的解決方案 – alsco77 2014-10-03 14:01:58

只要表達式服務於它，'ng-if'將包含元素的元素插入到DOM中。它幾乎和'ng-show'一樣，但不是隱藏元素，而是將其插入到DOM樹中（如果表達式計算結果爲false，則將其刪除）。所以，如果你想插入你的指令到DOM中，只要把它放在一個'ng-if =「isMyDirectiveActive」'就可以了的元素中，然後只要把'$ scope.isMyDirectiveActive'改爲true就可以了激活指令。在下一個渲染週期中，您的指令將被插入到DOM中並被激活。這更清楚嗎？ – 2014-10-03 14:40:58

是的，我明白，但這並不能給我我想要的功能。我想從函數調用中添加這些指令，所以我不必明確說明在視圖中將出現多少個指令。用你的方法，我需要在ng-if div中插入，這個指令是我計劃放在那裏的......但是我不知道我需要多少，他們需要動態插入 – alsco77 2014-10-03 14:57:48

-2

試試這個，使用$compile服務來編譯指定給定範圍的指令。

myApp.controller('MainCtrl', function($scope, $compile,$document) { 
    $scope.insertDir = function(){ 
    var x = $compile('<my-directive></my-directive>')($scope); 
    document.getElementById("mydiv").innerHTML = x[0].innerHTML; 
    }; 
});

來源

2014-10-03 14:07:55

爲什麼？這是錯誤的 - 不要修改控制器 – 2014-10-03 14:40:18

如何從角度控制器插入指令到視圖中？

回答

相關問題