角度js动态指令传递模型属性

我知道很多关于如何创建角度动态指令映射的相关帖子，但在我的情况下我找不到任何类似的东西。正如描述所示，我正在试图根据对象属性的值来制定一个动态指令，该html被更改。我把我的问题简化为这种情况：角度js动态指令传递模型属性

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

你能帮我吗？ 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是相同的

注意控制台ou输入指令。

我创建了一个plunker所以它更容易注意到这个问题：http://plnkr.co/edit/ulBSQQrqpSV9g3BNGRhO?p=preview

来源

2016-02-22 JmRag

控制台错误：错误：[$ compile：tpload]加载模板失败：widget.type.html（HTTP状态：404 Not Found）。你没有这个html文件，是吗？ – matmo

@matmo widget.type.html不应该是这样的。表达式widget.type应该评估为相应的类型 – JmRag

第一个例子你的指令：http://plnkr.co/edit/XAXy5RGLnvUZIoRj5xAs?p=preview

SECONE例如没有你的指令：

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

注：附加属性在你的Widget对象。更容易处理。

由于指令的scope-variable必须与模板中的变量（'widget'）相同，所以第一个不像没有指令的例子那样美观。我更喜欢第二个例子。

来源

2016-02-22 19:27:00 CodeNashor

虽然这是一个很好的解决方法，而且非常简单，但是有没有什么方法可以让我按照自己的方式工作？在我的情况下，问题很简单，但更复杂的情况下需要做更多的计算呢？我想不出任何具体的例子，但我想首先传递一个“参数”给指令... – JmRag

它仍然是一个参数，但是您在模板中使用“小部件”，例如在widget.html中使用{{widget.type}}。因此，您的指令的属性也必须命名为“小部件”，但它仍然是一个参数。第一个例子应该是你的方式还是我错过了什么？如果不是，则标记为解决方案。指令里面的计算？我不确切知道你的兴趣点，但这会有所帮助：http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-i-the-fundamentals – CodeNashor

角度js动态指令传递模型属性

回答

相关问题