如何在 Angular 1.x 中动态加载属性指令答案

【问题标题】：How to load attribute directive dynamically in angular 1.x如何在 Angular 1.x 中动态加载属性指令
【发布时间】：2016-12-08 06:33:30
【问题描述】：

我正在尝试使用对象中的值动态加载指令。为此，我尝试了以下操作：

<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>"
     };
 });

但它没有按预期工作。我有很多条件需要动态更改我的视图，所以我需要一些方法来改变我的对象并且视图会对它做出反应。

请帮助使其正常工作。

【问题讨论】：

标签： javascript angularjs angularjs-directive dynamic-loading

【解决方案1】：

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

【讨论】：