Question

我的角度模块中有一个自定义指令，我希望动态插入到我的视图中，多个实例包含来自模块内控制器内部功能的不同信息。这是怎么做的？例如，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(){
        //????
    }
}

Answer 1

使用ng-if。即<div ng-if="myDirectiveActive"> <my-directive></my-directive> </div>。只要div标志为真，它就会将带有指令的myDirectiveActive插入到DOM树中

Answer 2

当你考虑你的Angular应用程序时（通常当你在MVVM和＃34中思考时），想象一下控制器改变应用程序的某些状态 - 这是Angular中的ViewModel或$scope - 在设计控制器时，尽量不要考虑视图特定的术语。

然后，当您构建视图时，请尝试让视图对应用程序的状态做出反应（即$scope）。

保持这种分离，你的生活会更轻松。

专门针对您的问题。创造能够＆＃34;驱动＆＃34;你的观点（但观点需要）。如果您的视图想要基于此值（或值数组）创建指令，那么就这样吧。它可以这样做：

假设您的控制器设置$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>

如果您想再次添加指令＆＃34;，请考虑在$ scope.values中添加值，而不是向视图添加指令。例如，您可以在控制器中的某个功能中执行此操作，以响应用户的点击：

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

这是您更新的fiddle。

Answer 3

试试这个，使用$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;
  };
});

如何从角度控制器插入指令到一个视图？

3 个答案: