AngularJS - 指令創造條件按鈕級聯所有屬性

Question

我想創建一個AngularJS指令，它能夠與創建自定義按鈕NG-如果基於一個觸發事件屬性（綁定和動態價值根據用戶在表單上做的事情）並且級聯所有其他屬性（新的按鈕上的所有其他屬性（任何，不可預測）。該按鈕將包含myButton的相同HTML。

觸發事件條件在控制器所指定：

$scope.trigger = (specified in the controller and dynamic); // can be true or false 
$scope.disabled = (specified in the controller and dynamic); // can be true or false 

myButton的將是這樣的：

<my-button trigger-event="trigger" class="class" ng-disabled="disabled" ng-click="callback" any-other-attribute=[...]> 
    <span>any html</span> 
    <any-other-html></any-other-html> 
</my-button> 

該指令將反映在這樣的事：

<button ng-if="trigger-event" directive-to-trigger-event class="class" ng-disabled="disabled" any-other-attribute=[...]> 
    <span>any html</span> 
    <any-other-html></any-other-html> 
</button> 
<button ng-if="!trigger-event" type="submit" class="class" ng-disabled="disabled" ng-click="callback" any-other-attribute=[...]> 
    <span>any html</span> 
    <any-other-html></any-other-html> 
</button> 

指令觸發事件可能是任何東西：啓動彈出窗口的東西，重置窗體的東西，任何東西。

任何人都有想法如何做到這一點？任何提示將非常感激。

這是想法：http://plnkr.co/edit/kHCoExQSTPssL294NUux?p=preview

謝謝！

Answer 1

可以創建觸發任何事件的指令。在任何事件觸發器中，必須有特定的功能以獨特的方式執行。

因此，創建一個基地作用域控制器和與該控制器的範圍寄存器所需的觸發事件的功能。同時傳遞一個包含與函數聲明序列相同的函數參數的屬性。

創建指令，如你所提到的將被用於以下臨客：

<my-button trigger-event="triggerFunctionName" class="class" other-attribute=[...] 
     trigger-html-content="triggerHTMLPartialName"> 
    <span>any html</span> 
    <any-other-html></any-other-html> 
</my-button> 

創建指令，它是共享的基礎控制器範圍和編譯模板URL傳遞和更新指令的HTML與transcluded模式和執行觸發功能通過。

Answer 2

的指令的代碼是：

app.directive('myButton', function($timeout) { 

    var tpl = function(scope, element, attrs) { 
    var btn = "<button ng-if='trigger'>" 
      + "a<ng-transclude></ng-transclude>" 
      + "</button>" 
      + "<button ng-if='!trigger'>" 
      + " <ng-transclude></ng-transclude>" 
      + "</button>"; 
    return btn; 
    } 

    return { 
    restrict: 'E', 
    template: tpl, 
    transclude:true, 
    scope: { 
     eventData: '=', 
     trigger: '=triggerEventIf' 
    }, 
    link: function(scope, element, attrs, ctrl, transclude) { 
     scope.event = { 
     'title': scope.eventData.title 
     } 

     var setAttributes = function(){ 
     for(var attribute in attrs){ 
      if(attribute !== 'triggerEventIf' && attribute.charAt(0) !== '$') 
      angular.element(element[0].children).attr(attribute,attrs[attribute]) 

     } 
     } 

     scope.$watch('trigger', function(oldValue, newValue){ 
     if(oldValue !== newValue){ 
      $timeout(function(){ 
      setAttributes(); 
      }); 
     } 
     }) 

     $timeout(function(){ 
     setAttributes(); 
     }); 
    } 
    }; 
}); 

你可以去鏈接

http://plnkr.co/edit/Hk1AvRS3nN4YXqcLvZGR?p=preview

看到它在行動。

我使用$超時的原因是爲了確保setAttributes（）被正確消解。 setAttributes直接進行一些DOM操作，如果角度不正確，這可能會導致一些奇怪的行爲。 $超時函數是超時的角度包裝。但我們沒有時間給它，這基本上意味着它需要立即被調用。 Angular確保$ timeout的方法被它正確消化。因此，確保正確消化是一個簡單的方法。

直接調用$ apply或$ digest有時會導致衝突，如果正在處理摘要。這由$超時處理。

希望這會有所幫助。