AngularJS：尝试以编程方式向视图添加指令答案

【问题标题】：AngularJS: Trying to programatically add directives to a viewAngularJS：尝试以编程方式向视图添加指令
【发布时间】：2013-11-07 16:00:34
【问题描述】：

这是我的笨蛋：http://plnkr.co/edit/BGD0n6gmDM3kv5akIn4l?p=info

我正在尝试创建一个视图工厂。理想情况下，我的控制器会将配置对象放入视图将用于呈现页面的范围内。它将用于构建导航和内容。我在尝试从该对象动态传递指令/部分视图引用时被卡住了。

这是与我的控制器中的配置隔离的对象：

$scope.partials = [
    {
        name: 'Well',
        method: 'showWell()',
        isVisible: false,
        template: '<container-well></container-well>'
    }
 ];

这个问题的重点是模板属性。我在这里构建了指令以用作部分视图。

这是我的指令之一的示例：

myApp.directive('containerWell', function() {
    return {
        restrict: 'E',
        replace: false,
        templateUrl: 'containers/well.html',
        scope: {}
    }
});

这里是 well.html 模板文件：

<div>
    <h2 class="special">Well Types</h2>
    <div class="well well-cc">
        <p>Closed Well</p>
        <p>CSS: .well.well-cc</p>
    </div>

    <div class="well well-cc open">
        <p>Open Well</p>
        <p>CSS: .well.well-cc.open</p>
    </div>

    <h3 class="alt">Wells can have different highlights applied with css classes</h3>
    <div class="well well-cc highlight-warning">
        <p>CSS: .well.well-cc.highlight-warning</p>
    </div>
</div>

这是我认为失败的代码：

<div ng-repeat="partial in partials" ng-bind-html-unsafe="{{partial.template}}"></div>

生成的标记如下所示：

<div class="ng-scope" ng-bind-html-unsafe="<container-well></container-well>" ng-repeat="partial in partials"></div>

它基本上只是将字符串标记添加到属性而不是指令。

基本上，我希望能够以编程方式将指令添加到我的视图中。我不确定我想要做的事情是否可行。我不确定传递与指令等效的字符串是否可行。如果我很荒谬，我会喜欢一些建议，甚至是一些严厉的纠正；好吧，不要太严厉，也许是建设性的；）

这是我的笨蛋：http://plnkr.co/edit/BGD0n6gmDM3kv5akIn4l?p=info

谢谢，

约旦

【问题讨论】：

标签： javascript angularjs angularjs-directive ng-bind-html

【解决方案1】：

你必须$compile动态模板。请参阅docs 中的示例。我用你的 plunk 来演示这个案例：

http://plnkr.co/edit/WBT9FbZmvp0Xj0LAAPzk?p=preview

要点是：

ng-bind-html-unsafe 不适合这种用法。
创建另一个指令来编译动态模板，就像在示例中一样：

编译其实很简单：

MyApp.directive("myDir", function($compile) {
    return {
        link: function(scope, elem, attrs) {
            scope.$watch(
                function(scope) {
                    return scope.$eval(attrs.myDir);
                },
                function(value) {
                    var e = $compile(value)(scope);
                    elem.contents().remove();
                    elem.append(e);
                }
            );
        }
    };
});

将其用作：

<div ng-repeat="partial in partials">
    <div my-dir="partial.template"></div>
</div>

【讨论】：