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

AngularJS: Trying to programatically add directives to a view

本文关键字：视图 添加 指令 方式 编程 AngularJS      更新时间：2023-09-26

这是我的 plunk： 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: {}
    }
});

这是井.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

谢谢

约旦

您必须$compile动态模板。请参阅文档中的示例。我分叉了你的 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>
相关文章：