AngularJS：傳遞函數指令

我通過傳遞函數的指令有問題（熟悉這個帖子：AngularJS - pass function to directive但我不能得到它的工作）AngularJS：傳遞函數指令

這裏是我的代碼：

指令：

.directive('testdirective', function(){ 
    return{ 
    restrict: 'E', 
    scope: { 
     onClick: '&' 
    }, 
    controller: 'TestController', 
    controllerAs: 'tc', 
    bindToController: true, 
    template: '<div><button ng-click="onClick()">What UP</button></div>', 
    replace: true 
    } 
})

控制器：

TestController.$inject = ["$scope"]; 
    function TestController($scope) { 
    $scope.testFunction = function(){ 
     alert("I´m the alert of the TestContoller"); 
    }; 
    $scope.test = 'test'; 
    }

HTML：

<div> 
    <testdirective on-click="testFunction()"></testdirective> 
</div>

我想要的聲音非常簡單，我只想將該函數傳遞給指令並在ng按鈕上執行該按鈕。

對我來說，我的代碼看起來完全like this fiddle 但我的不工作：/

將是真棒，如果有人有一些提示我。

編輯

我的指令都需要自己的控制！

後來要傳入的函數將來自另一個控制器！

來源

2016-01-25 Jonas Hans

什麼是你的錯誤？ –

什麼也沒有 - 只是沒有執行 –

工作的JSFiddle擁有控制器**外**指令。你的代碼在**指令裏面有控制器**。您的指令使用**隔離範圍**。範圍**外**的函數不會被範圍內** **繼承。 – georgeawg

小提琴與您的代碼不一樣。

您已將您的指令的控制器設置爲「TestController」。我假設你想要做的是：

.directive('testdirective', function(){ 
    return{ 
     restrict: 'E', 
     scope: { 
      onClick: '&' 
     }, 
     template: '<div><button ng-click="onClick()">What UP</button></div>', 
     replace: true 
    } 
});

，並在你的HTML，

<div ng-controller="TestController"> 
    <testdirective on-click="testFunction()"></testdirective> 
</div>

編輯：基於OP的評論

app.directive('testdirective', function(){ 
     return{ 
      restrict: 'E', 
      scope: { 
       onClick: '&' 
      }, 
      template: '<div><button ng-click="tc.onClick()">What UP</button></div>', 
      replace: true, 
      controller: 'TestController', 
      controllerAs: 'tc', 
      bindToController: true 
     } 
    }); 

    app.controller('TestController', function ($scope) { 
     console.log($scope); 
    }) ; 

    app.controller('AnotherController', function ($scope) { 
     $scope.testFunction = function(){ 
      alert("I´m the alert of the TestContoller"); 
     }; 

     $scope.test = 'test'; 
    });

而且，你的HTML

<div ng-controller="AnotherController"> 
    <testdirective on-click="testFunction()"></testdirective> 
</div>

您正在告訴指令bindToControlle河因此，在指令模板中，onClick綁定到控制器而不是範圍。因此，您通過控制器訪問onclick，如tc.onClick()在指令的模板中。

來源

2016-01-25 11:11:15 Prashant

執行。非常感謝。問題是，我需要我自己的控制器來計算一些數據（稍後）--->所以我需要：控制器：'TestController'，controllerAs：'tc'，bindToController：true，稍後該函數應該從另一個控制器 –

查看編輯 – Prashant

這就是我正在尋找的謝謝！ –

您可能想通過一個方法作爲參考：

1.Pass功能作爲參考，而不是一個電話：

<div> 
    <testdirective on-click="testFunction"></testdirective> 
</div>

2.更新的指令：

.directive('testdirective', function(){ 
    return{ 
     restrict: 'E', 
     scope: { 
      onClick: '=' 
     }, 
     template: '<div><button ng-click="onClick()">What UP</button></div>', 
     replace: true 
    } 
});

JSFIDDLE。

來源

2016-01-25 11:15:17

非常感謝。問題是，我需要我自己的控制器來計算一些數據（後來）--->所以我需要：控制器：'TestController'， controllerAs：'tc'， bindToController：true， –

那麼，在你的testdirective中，你定義了控制器TestController。您試圖通過onClick指令範圍參數調用的testFunction()在控制器TestController（定義控制器）中定義。所以，而不是通過onClick撥打，您可以直接撥打電話一樣

template: '<div><button ng-click="testFunction()">What UP</button></div>'.

它很混亂，你定義在指令控制器，再次參考它通過它看起來像遞歸同一指令的範圍參數的一個功能。

如果你想通過指令作用域參數調用，那麼你應該做下面的改變。

例如， JS：

<div ng-controller="TestController" ng-app="dr"> 
    <testdirective on-click="testFunction()"></testdirective> 
</div> 

app.directive('testdirective', function() { 
    return{ 
    restrict: 'E', 
    scope: { 
     onClick: '&' 
    }, 
    template: '<div><button ng-click="onClick()">What UP</button></div>', 
    replace: true 
    } 
});

來源

2016-01-25 11:40:04

非常感謝。的問題是，我需要我自己的控制器（後）來計算一些數據--->所以我需要：控制器：「的TestController」， controllerAs：「TC」， bindToController：真實，後來功能應該從另一個控制器傳入 –

Directivie：

.directive('testdirective', function(){ 
return{ 
restrict: 'E', 
scope: { 
    onClick: '=onClick' 
}, 
controller: 'TestController', 
controllerAs: 'tc', 
bindToController: true, 
template: '<div><button ng-click="onClick()">What UP</button></div>', 
replace: true 
} 
})

使用'='代替'&'這樣你就可以獲取你的指令中的HTML功能。你可以簡單的通過HTML HTML傳遞onClick參數：

<div> 
<testdirective on-click="testFunction()"></testdirective> 
</div>

來源

2016-01-25 12:11:03

AngularJS：傳遞函數指令

回答

相關問題