Question

我有一个指令，如果没有传递id，那么它应该生成一个，但看起来生成速度慢并且指令中不存在id。

(function (angular) {
'use strict';

angular.module('Widgets.Module')
.directive('myDirective', [
    function () {
        function postLink(scope, jqElm, attr) { }

        function postCompile(tElement, tAttrs) {
            return function postLink(scope, jqElm, attr) {
                attr.$observe("id", function (id) { // called on on init
                    scope.id = id !== undefined ? id : 'something 1';
                });
            }
        }

        function Ctrl(scope) {
        }

        return {
            template:
                '<div id="{{ id }}">' +
                '</div>',
            controller: [
                '$scope', Ctrl
            ],
            replace: true,
            scope: {
                id: '@'
            },
            restrict: 'AC',
            link: postLink,
            compile: postCompile
        };

    }
])
;
})(window.angular)

Answer 1

我认为使用id是特殊的，因为它是一个有效的DOM属性。在我的情况下，id也被添加为指令html的属性，而不是我正在使用它的内部子项。

我创建了一个名为input-id的新属性，该属性不会受到此名称冲突的影响。

<autosuggest input-id="country"></autosuggest>

生成的标记是：

<div class="autosuggest"><input id="country"></div>

......这就是我认为你的目标。

指令的scope块如下所示：

scope: {
    inputId: '@'
}

Answer 2

一种可能的解决方案是禁用自动数据绑定（scope: {}）并在链接功能中手动执行。

选中fiddle。

module.directive('myDialog', function () {
  return {
    replace: true,
    restrict: 'E',
    scope: {},
    template: '<div>Test {{a1}}</div>',
    link: function (scope, element, attrs) {
      if (!attrs.a1) {
        scope.a1 = "default";
      } else {
        scope.a1 = attrs.a1;
      }
    }
  }
});

传递id并作为指令的参数

2 个答案: