Question

我知道关于如何以角度创建动态指令映射的许多相关帖子，但在我的情况下我找不到类似的东西。正如描述所示，我试图制作一个动态指令，其中取决于对象属性的值，html被更改。我把问题简化为这个案例：

我有一个对象“Widget”的列表，它有一个属性名称'type'。我希望依赖于此列表的type属性来根据属性呈现html。更具体地说，Widget.type可以有3个值，例如：widget1，widget2。所以在我的情况下，我希望指令返回文件小部件* .html。（widget1.html用于小部件类型“widget1”等）。虽然我使用属性将参数传递给指令，但是不计算值，并且字符串widget.type是return。

你能帮帮我吗？ Thx提前。

app.js文件：

var app = angular.module("MainCtrl", []);

app.controller("myCtrl", function($scope) {
   function Widget(type){
     this.type=type;
    }

    $scope.widgets=[];

    $scope.widgets.push(new Widget('widget1'),new Widget('widget2'),new Widget('widget3'));



});

app.directive('widget', function() {
    return {
        restrict: 'E',
        scope: {
            obj: '='
        },
        templateUrl: function(element,attr){
            //console.log(attr);
            console.log(attr.obj);
            return attr.obj+'.html';
        }
    }

});

index.html文件：

<!DOCTYPE html>
<html ng-app="MainCtrl">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>

    <!-- css  -->
    <link rel="stylesheet" href="style.css" />

    <!-- utilities  -->
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>

   <!--  angular module file -->
    <script src="script.js"></script>



  </head>

  <body  ng-controller="myCtrl">

                <div  ng-repeat="widget in widgets">
                  {{widget.type}}

                    <widget obj='widget.type'   ></widget>
                </div>

    </body>

widget1.html文件：

<div class="widget">
    widget1:{{widget.type}}
</div>

widget2.html，widget3.html是相同的

注意指令中的控制台输出。

我创建了一个plunker，因此更容易发现问题：http://plnkr.co/edit/ulBSQQrqpSV9g3BNGRhO?p=preview

Answer 1

使用您的指令的第一个示例：http://plnkr.co/edit/XAXy5RGLnvUZIoRj5xAs?p=preview

没有你指令的Secone示例：

<div  ng-repeat="widget in widgets">
   <!--{{widget.type}}-->
   <div ng-include="widget.template"></div> 
</div>

注意：Widget-object中的附加属性。更容易处理。

第一个不如没有指令的示例那么漂亮，因为指令的scope-variable必须与模板中的变量（'widget'）相同。我更喜欢第二个例子。

angular js动态指令传递模型属性

1 个答案: