javascript - 如何动态加载和编译指令？

Question

我在 Angular js 中有一个场景。

我有一个主下拉列表，其中包含“子列表”和“子下拉列表”项。我已经使用指令加载了子列表和子下拉列表。

现在我的场景很简单，在从下拉列表中选择子列表时，我想加载“list-directive”，在从主下拉列表中选择子下拉列表时，我希望结果为“dropdown-”指令'

它应该是动态发生的。

我的 Seeddata.js:

var dirType = [
{ text: 'List', value: 0 },
{ text: 'Table', value: 1 },
{ text: 'Dropdown', value: 2 }
];

我的指令

var directiveModule = angular.module('directiveModule', ['serviceModule']);

directiveModule.directive('payerListDirective', function (payerService) {
return {
    restrict :"AC",
    template: "<ul><li ng-repeat='payer in dirType'>{{payer.text}}</li></ul>",
    link: function ($scope) {
        $scope.payersDir = payerService.getPayers();
    }
  };
});
directiveModule.directive('payerDropdownDirective', function (payerService)
{
return {
    restrict: "AC",
    template: "<select ng-model='x' ng-options='payer.value as payer.text for payer in dirType' ></select>",
    link: function ($scope) {
        $scope.payersDir = payerService.getPayers();
    }
};
});

注意:payerService 是我从服务模块注入(inject)以加载数据的工厂

我的看法

<div ng-controller = "dircntrl" >

<select ng-model = "dirdummy">
<option ng-repeat = "dir in dirType" value = "{{dir.value}}" >{{dir.text}}     </option>
</select>
<div parent-directive></div> // This is the place where I need solution

我的 Controller

cntrlModule.controller('dircntrl', function ($scope) {
$scope.dirType = dirType;
$scope.$watch('dirdummy',function(){
    // Want the solution here
})
});

我试图在 Controller 中使用 $watch 来加载结果。但我不知道执行此操作的确切方法。

Answer 1

检查工作演示:JSFiddle .

你不需要$watch。使用 ng-if 动态加载不同的指令。选择一个选项后，将加载相应的指令。

Note: ng-if will remove/create the DOM every time. So after you select a different option, the current DOM is removed and a totally new DOM element is inserted.

angular.module('Joy', [])
    .controller('JoyCtrl', ['$scope', function ($scope) {
        $scope.choice = '0';
    }])
.directive('firstDirective', function () {
    return {
        restrict: 'A',
        template: '<div>First directive</div>'
    };
})
.directive('secondDirective', function () {
    return {
        restrict: 'A',
        template: '<div>Second directive</div>'
    };
});

HTML:

<div ng-app="Joy" ng-controller="JoyCtrl">
    <select ng-model="choice">
        <option value="0" name="0">Zero</option>
        <option value="1" name="0">One</option>
    </select>
    <div>Selected: {{ choice }}</div>
    <div ng-if="choice==='0'" first-directive></div>
    <div ng-if="choice==='1'" second-directive>Second</div>
</div>

---

更新 1

如果你想实时编译指令(虽然不推荐)，你可以使用 $compile实现它的服务:JSFiddle .

关键是:使用ng-change调用一个函数，编译相应的指令:

var $container = $('#result');
var directiveNames = [
    'payer-list-directive', 
    'payer-dropdown-directive', 
    'payer-dropdown-directive'
];
$scope.changeMe = function () {
    var $ele = $compile('<div ' + directiveNames[$scope.dirdummy] + '></div>')($scope);
    $container.html($ele);
};

在 HTML 中:

<select ng-model="dirdummy" ng-change="changeMe()">