如何將指令名稱傳遞給模板 - Angular.js

我有一個指令可以創建一堆類似的小部件。每個widget都有不同的指令。這裏是我用來創建我的插件的模板：申報需要使用的指令如何將指令名稱傳遞給模板 - Angular.js

template: '<li><div {{widgetModel.directiveName}}></div></li>'

我想要的變量來進行協調和或模板。然後，模板將是：

template: '<li><div directive-name></div></li>'

然後，我希望它作爲與directiveName屬性名正常的指令。目前的代碼沒有發生這種情況，我不知道如何使其表現得像我所需要的那樣。 directiveName指令可以是任何東西。

來源

2013-11-05 jhamm

單行代碼沒有說明問題。什麼從模板獲取輸出？你期望輸出什麼？指令可以在標記中以3種不同的方式標識 – charlietfl

您是否使用指令的名稱以破折號分隔而不是camelCase？ – dimirc

不，我更新了我的問題。 – jhamm

你可以做在編譯功能的變化：

angular.module('myWidgets', []) 
    .directive('multiDirective', function() { 
    return { 
     restrict: 'E', 
     compile: function(element, attrs) 
     { 
      var htmlText = '<ul>' + 
        '<li ' + attrs.directiveName + '>' + '</li>' + 
       '</ul>'; 
      element.replaceWith(htmlText); 
     } 
    } 
})

然後你可以這樣調用它：

<multi-directive directive-name='widget1' />

來源

2013-11-05 04:45:56 dimirc

我基於Angular Dynamic Templates博客文章的提示作出a CodePen example，我在另一篇文章中被引用。

爲了有HTML，看起來像以下：

<div ng-controller="ExampleCtrl"> 
    <div ng-repeat="dir in dirs"> 
    <div smart /> 
    </div> 
</div>

，並假設你的控制器看起來是這樣的：

function ExampleCtrl($scope) { 
    $scope.dirs = ["<div dir-a />","<div dir-b />"]; 
}

的smart指令看起來是這樣的：

.directive('smart', function($compile) { 
    return { 
     restrict: 'AE', 
     link: function (scope, element) { 
     element.html(scope.dir); 
     $compile(element.contents())(scope); 
     } 
    }; 
});

來源

2013-11-05 05:05:06

如何將指令名稱傳遞給模板 - Angular.js

回答

相關問題