角度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動態指令傳遞模型屬性

回答

相關問題