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

这是我的建议：

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

以下是我的控制器中配置的一个独立对象：

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

下面是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>

井型
封闭井

CSS:.well.well-cc

开井

CSS:.well.well-cc.open

井可以使用css类应用不同的高光
CSS:.well.well-cc.highlight-warning

以下是我认为失败的代码：

<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>

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

基本上，我希望能够通过编程将指令添加到我的视图中。我不确定我正在尝试做的事情是否可能。我不相信传递指令的字符串等价物是正确的方法。如果我是荒谬的，我会喜欢一些建议，甚至一些严厉的纠正；嗯，不要太严厉，也许是建设性的；）

这是我的建议：

谢谢

---

Jordan

您必须

$compile

动态模板。请参见中的示例。我用你的叉子来演示这个案例：

要点是：

• 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>

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