javascript - 使用 ng-repeat 动态加载指令

Question

我用我自己的指令包装 HTML“select”元素。该指令应创建一个代表其选项的下拉菜单。

我用我的自定义“arBootstrapSelect”指令/属性标记选择元素。该指令附加一个下拉菜单，其中的选项由 ng-repeat 重复。

“select”元素中的“option”元素被标记为“arBootstrapSelectOption”。他们应该有一个“内容”属性，代表一个动态指令。此动态指令应编译并显示在下拉菜单中。

基本上，每个选项(由“arBootstrapSelectOption”标记)使用 $compile 服务编译它的“content”属性，并将其注入(inject)到 arBootstrapSelect 指令中的列表中。之后 arBootstrapSelect 应该使用 ng-repeat 显示编译选项。希望不要太复杂。我得到 Error Link

HTML:

<select ar-bootstrap-select class="form-control">
                <option ar-bootstrap-select-option value={{$index}} ng-repeat="c in countries" content="<ar-country country-id='{{$index}}'></ar-country>">


                </option>
            </select>


<div class="dropdown">
                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    Dropdown
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                    <li ng-repeat="option in arBootstrapSelectOptions">
                        {{option[1]}}
                    </li>
                </ul>
            </div>

我的指令:

(function () {
'use strict';
var app = angular.module('mainApp');

app.directive('arBootstrapSelect', function ($interval, $compile) {
    $scope.arBootstrapSelectOptions = [];

    function link(scope, element, attrs) {
        //element.hide();

    }

    return {
        restrict: 'A',
        link: link,
        scope: true
    }

});

app.directive('arBootstrapSelectOption', function ($compile) {
    function link(scope, element, attrs) {
        scope.arBootstrapSelectOptions.push([attrs.value, $compile(attrs.content)(scope)]);
    }

    return {
        scope: true,
        restrict: 'A',
        link: link,
    }

});
})();

这行得通，但又丑又慢:

(function () {
'use strict';
var app = angular.module('mainApp');

app.directive('arBootstrapSelect', function ($interval, $compile) {
    //$scope.arBootstrapSelectOptions = [];

    function link(scope, element, attrs) {
        //element.hide();

        scope.$on('arBootstrapSelectNewItem', function (event, data) {
            var test = $('<li></li>').append(data);
            element.parent().find('.dropdown-menu').append(test);

        });

    }

    return {
        restrict: 'A',
        link: link,
        scope: true,
        transclude: true
    }

});

app.directive('arBootstrapSelectOption', function ($compile) {
    function link(scope, element, attrs) {
        //scope.arBootstrapSelectOptions.push([attrs.value, $compile(attrs.content)(scope)]);
        scope.$emit('arBootstrapSelectNewItem', $compile(attrs.content)(scope));

    }

    return {
        scope: true,
        restrict: 'A',
        link: link
    }

});
})();

Answer 1

我没有完全理解你的具体例子，所以我会在概念层面上回答。

在高层次上，您似乎只想为 ng-repeat 指定一个用户提供的模板。 (例如 <ar-country country-id='{{$index}}'> )并将其放置在指令提供的模板中(例如 <li> 内)。

将模板作为内容而不是作为属性提供会更容易和更用户友好。然后，您只需要嵌入内容即可。 (我在这里避免使用 <option>，因为它本身就是一个指令，我不明白你到底想做什么 - 我将使用 <my-option> 代替):

<my-option ng-repeat="c in countries">
  <ar-country country-id='{{$index}}'></ar-country>
<my-option>

指令看起来像这样:

.directive("myOption", function(){
  return {
    scope: true,
    transclude: true,
    template: '<li ng-transclude></li>'
  }
});

这将在概念上创建以下 HTML:

<my-option>
  <li><ar-country country-id="0"></ar-country></li>
</my-option>
<my-option>
  <li><ar-country country-id="1"></ar-country></li>
</my-option>
..

(指令arCountry也会被编译链接，可能会生成自己的内容)

另外，如果 parent 需要为每个 child 注册，最好使用require沟通而不是$emit/$on .所以，parent需要定义一个具有注册子项功能的 Controller 。同样，如果您需要提供额外的模板，请嵌入内容:

<my-select>
  <my-option ng-repeat="c in countries>
    <ar-country country-id='{{$index}}'></ar-country>
  </my-option>
</my-select>

.directive("mySelect", function(){
  return {
    scope: true,
    transclude: true,
    template: '<h1>heading</h1><div ng-transclude></div>',
    controller: function(){
      // this can be called by the child
      this.registerChild = function(childElement, childController){
        // store the children, if needed
      }
    }
  }
});

利用this.registerChild我们需要制作 myOption使用 require :

.directive("myOption", function(){
  return {
    scope: true,
    transclude: true,
    template: '<li ng-transclude></li>'
    require: ['myOption', '^mySelect'],
    controller: function(){
      // you can define some functions here
    },
    link: function(scope, element, attrs, ctrls){
      var me = ctrls[0], 
          selectCtrl = ctrls[1];

      selectCtrl.registerChild(element, me);
  }
});