在指令内部装饰AngularJS指令模板

Question

我有一个指令，如下所示：

angular.module('some-module').directive('someDirective', function() {
  return {
  restrict: 'E',
  replace: 'true',
  templateUrl: 'some-template.html',
  link: link,
  require: '^form',
  transclude: true,
  scope: {
  decorate: '=',
  }
 };
});

假设这是the-template.html的外观（虽然实际模板中还有更多）：

<div ng-transclude></div>

这就是我将使用指令的方式：

<some-directive decorate="true">
  <input name="x" type="number" ng-model="x">
  <input name="y" type="number" ng-model="y">
</some-directive>
<some-directive decorate="false">
  <input name="a" type="number" ng-model="a">
  <input name="b" type="number" ng-model="b">
</some-directive>

我要执行的指令是操纵DOM，以便如果decorate为true，则两个输入字段应以某些div s的装饰如下：

      <div class="some-outer-class">
           <div class="some-class-1">
              <input name="x" type="number" ng-model="x">
            </div>
            <div class="some-class-2">
               <input name="y" type="number" ng-model="y">
            </div>
            <div><i class="some-glyph-icon"></i></div>
          </div>

如果decorate属性是错误的或不存在的，则该指令不应进行任何操作。

无法弄清楚如何做到这一点。任何帮助都将不胜感激。

Answer 1

您可以简单地修改链接函数中的模板：

演示

link: function(scope, elem, attrs){
    if(scope.decorate || attrs.decorate != null){
      elem.find('INPUT').wrap('<div class="decorate-class"></div>')
    }
}

Answer 2

您可以在指令中执行此操作。您首先在指令内定义一个控制器，如下所示：

angular.module('some-module').directive('someDirective', function() { 
    var controller = function($scope) {
        //The controller methods
    };
    return {
    restrict: 'E',
    replace: 'true',
    templateUrl: 'some-template.html',
    link: link,
    require: '^form',
    transclude: true,
    scope: {
        decorate: '=',
    },
    controller: controller,
    controllerAs: 'myCtrl'
    };
});

在控制器内部，您可以检查装饰值，并进行相应的DOM操作。您可以通过$范围从控制器访问装置值。

var controller = function($scope) {
    if($scope.decorate){
        //Make the DOM manipulation
    }
};

DOM操作如下：

var initialInput = document.querySelector('query'); //You have to select your desired input elements here
var decoratedInput = document.createElement("div");
decoratedInput.className += " some-class-1";
decoratedInput.innerHTML = "<input name='x' type='number' ng-model='x'>";
initialInput.parentNode.replaceChild(decoratedInput, initialInput);