指令內部裝飾AngularJS指令模板

我有一個定義，說一個指令，如下：指令內部裝飾AngularJS指令模板

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

比方說，這是一些-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>

我WA NT上的指示做的是操作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屬性是假的，或缺席，指令不應該做任何操作。

想不出如何做到這一點。任何幫助表示讚賞。

來源

2016-06-16 Mubin

-1

您可以在指令中執行此操作。你首先你的指令內定義控制器如下：

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操作。您可以通過$ scope從控制器訪問裝飾值。

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);

來源

2016-06-16 14:07:27

如何操作** ** DOM在控制器中？控制器沒有** DOM **元素。他需要使用'link'功能！ –

當然你可以從控制器操縱DOM - ）這是1.5中的actullay推薦方式。 –

他可以使用控制器中的angular.element（）或document.getElementById（）方法並進行操作。 –

你可以簡單地修改鏈接功能模板：

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

DOM操作按如下規則進行

Demo

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

來源

2016-06-16 14:38:22 MarkoCen

我同意鏈接功能是做這個DOM操作的最合理的地方。 – ryanyuyu

指令內部裝飾AngularJS指令模板

回答

相關問題