Question

我已经从角落里找到了我需要的东西，希望有一种简单的方法可以实现我所追求的目标。

我有一个看起来像这样的指令：

m.directive("string", function() {
  return {
    replace: true,
    restrict: 'E'
    scope: {'value':'='}
    template: '<div>yada yada yada <input type="text" ng-model="value"/></div>'
  };
});

我有另一个指令必须只在文本输入元素之上：

m.directive("maskedString", function() {
  restrict: 'A',
  link: function(scope, element, attrs) {
     // ... do stuff on the element
  }
});

所以......我可以毫无问题地做到这一点：

<input type="text" masked-string />

然而，我真正需要的是：

<string masked-string />

这应该在编译模板之前在输入字段上设置masked-string属性。

实现这一目标的最佳方法是什么？ 10X

Answer 1

我建议您使用该指令的编译方法。这是一个工作小提琴 - http://jsfiddle.net/R4a62/1/

myApp.directive("string", function () {
return {
    replace: true,
    restrict: 'E',
    scope: {
        'value': '='
    },
    compile:function(element, attrs){
        var newElement = angular.element('<div>yada yada yada <input type="text" masked-string ng-model="value"/></div>');
        element.replaceWith(newElement);
    }
};
});

Answer 2

您可以使用$ compile执行此操作。您只需要更改顶级指令。这是一个例子的小提琴。 http://jsfiddle.net/D94t7/6/

m.directive("string", function ($compile) {
    return {
        replace: true,
        restrict: 'E',
        scope: {
            'value': '=',
            'drtv': '='
        },
        link: function(scope, element, attrs) {
            var template = '<div>yada yada yada <input type="text" ng-model="value" '+ attrs.drtv +'/></div>';
            // Add the HTML
            var el = angular.element(template);
            element.append(el);
            // Compile and bind to scope
            var compiled = $compile(el);
            compiled(scope);
        }
    };
});

属性指令用于处理另一个指令内的元素

2 个答案: