angular.js：如何將ngclick從原始dom傳遞到指令的dom？

您好我有我的工作，這種「可確定」按鈕指令，angular.js：如何將ngclick從原始dom傳遞到指令的dom？

的HTML代碼，將觸發指令「可證實」

 <span confirmable ng-click='users.splice($index,1)'></span>

指令：（CoffeeScript的）

angular.module('buttons',[]) 

    .directive 'confirmable',() -> 
    template: """ 
     <button class='btn btn-mini btn-danger'> 
     Destroy 
     </button> 
    """ 
    replace: yes

所以我希望看到這個指令生成的最終結果是

 <button class='btn btn-mini btn-danger' ng-click='users.splice($index,1)'> 
     Destroy 
     </button>

到目前爲止，我得到了它與鏈接功能工作指令

angular.module('buttons',[]) 

    .directive 'confirmable',() -> 
    template: """ 
     <button class='btn btn-mini btn-danger'> 
     Destroy 
     </button> 
    """ 
    replace: yes 
    link: (scope, el, attrs) ->    <---------- linking function 
     $(el).attr 'ng-click', attrs.ngClick

內，但我已經通過指令文件走了一遍，發現與=，@，&運營商，但我的財產範圍我真的不確定他們是否是我需要的。然後有這個transclude屬性，我仍然需要了解，但目前似乎也沒有幫助。所以雖然我的鏈接功能現在可以做到這一點，但我認爲我應該問問角度是否提供了更優雅的解決方案。

謝謝！

來源

2012-10-23 Nik So

像你想從你的指令中調用從父範圍的方法聽起來我...

我已經把一個Plunk here

（對不起，我喜歡的JavaScript ...所以在這裏）

這是你的父母控制器。

app.controller('ParentCtrl', function($scope) { 
    $scope.fooCalled = 0; 
    $scope.foo = function() { 
     $scope.fooCalled++; 
    }; 
});

然後你的商標達

<div ng-controller="ParentCtrl"> 
    Foo Called: {{fooCalled}}<br/> 
    <button ng-click="foo()">Call From Parent</button><br/> 
    <custom-control custom-click="foo()"></custom-control> 
</div>

而且你的指令聲明：

app.directive('customControl', function(){ 
    return { 
    restrict: 'E', 
    scope: { 
     innerFoo: '&customClick' 
    }, 
    template: '<button ng-click="innerFoo()">Call From Control</button>' 
    }; 
});

在你的指令定義scope聲明位是有什麼聯繫父範圍函數引用到您的指令的範圍，因此可以在點擊時調用它。這就是&。

來源

2012-10-23 22:11:19

我可以看到這是非常有用的，是各地傳遞的功能是這樣的。但是，只是好奇，你可以將參數傳遞給foo（）嗎？以及它將如何滲透到指令？ –

是的，你可以傳遞參數。一般情況下，事情會從指令「滴落」到父母，而不是相反。如果您在調用對父函數的引用之前需要對指令進行一些操作，那麼您只需將該調用包裝在指令的控制器聲明中的另一個範圍函數中即可。 –

嗯。不建議重複使用'ng-click'，因爲它是衆所周知的？它在你的例子中起作用，但是如果你爲你的指令使用'replace：true'選項，它會中斷。我不知道爲什麼。 = [ – Langdon

你做得對。控制器用於在指令之間共享通用功能;你在這裏不需要一個。此外這種情況下是如此簡單，你甚至都不需要一個鏈接功能：

http://jsfiddle.net/V7Kpb/12/

複製指令鏈接階段屬性在沒有做任何事情，只要角度而言。您只需擁有一個具有ng-click屬性的按鈕，但在Angular處理完DOM後添加了該按鈕。

另請注意，element作爲鏈接函數的第二個參數已經是jQLite（如果您有鏈接，也可能是完整的jQuery。）無需jQuerify它。

另外，關於隔離範圍（您提及的=，@和&）。這是一個可愛的優雅語法，但是最大的缺點是同一元素上的其他指令也會與範圍隔離。所以如果你想使用ngModel這是一個常見的事情你不能使用隔離範圍。實際上，即使在這種情況下，如果您使用隔離範圍ng-click停止工作。因爲它會嘗試評估包含未在範圍{}屬性中明確聲明的內容的表達式。

來源

2012-10-24 05:10:41 jpsimons

如果您在鏈接階段操作DOM並且想要爲其元素添加角度邏輯，則需要編譯受影響的元素。讓角注入$compile並在完成DOM處理並添加您的ng-*指令後調用它。

function MyDirective($compile) 
 
{ 
 
    return { 
 
     
 
     restrict: "AE", 
 
     templateUrl: "/path", 
 
     link: (scope, element, attributes) => 
 
     { 
 
      // Add your directives 
 

 
      $compile(element.contents())(scope); 
 
     } 
 
    }; 
 
}

來源

2015-08-07 03:20:14

angular.js：如何將ngclick從原始dom傳遞到指令的dom？

回答

相關問題