如何在角1.x中动态加载属性指令

时间:2016-12-08 06:33:30

标签: javascript angularjs angularjs-directive dynamic-loading

我正在尝试使用对象中的值动态加载指令。为此,我尝试了以下内容:

<body ng-app="myApp" ng-controller="myCtrl">
    <div {{testDirectiveJson.first}}-directive></div>
    <div {{testDirectiveJson.sec}}-directive></div>
    <div {{testDirectiveJson.third}}-directive></div>
    <script src="./test.directive.js"></script>
</body>

这是我的js

var app = angular.module("myApp", []);
 app.controller('myCtrl', function($scope) {
     $scope.testDirectiveJson = {
         first: '1',
         sec: '2',
         third: '3',
     }
     $scope.lastName = "Doe";
 }).directive("1Directive", function() {

     return {
         restrict: 'A',
         template: "<h1>Made by a directive A!</h1>"
     };
 }).directive("2Directive", function() {
     return {
         restrict: 'A',
         template: "<h1>Made by a directive! B</h1>"
     };
 }).directive("3Directive", function() {
     return {
         restrict: 'A',
         template: "<h1>Made by a directive! C</h1>"
     };
 });

但它没有按预期工作。我有很多条件,我必须动态地改变我的视图所以我需要一些方法,我只是改变我的对象和视图将对它作出反应。

请帮助让它发挥作用。

1 个答案:

答案 0 :(得分:0)

通过创建另一个指令并将属性动态添加到您需要的元素来尝试此操作。 JSFIDDLE