如何在指令鏈接函數中使用'＆'和參數調用控制器函數？

我想一個參數傳遞到函數，向鏈路功能，類似這樣的問題裏面： Angular: calling controller function inside a directive link function using &如何在指令鏈接函數中使用'＆'和參數調用控制器函數？

不過，雖然我已經看到了一些例子，像這樣的：Passing Parameters from a Directive to a function和我看到一個參數值被設置在指令內的鏈接裏面。然而，我還沒有看到任何你傳遞基元的地方，就像一個數字作爲參數傳遞給控制器函數一樣。

我試過了很多東西，但還沒有弄清楚語法。

HTML代碼：

<!DOCTYPE html> 
<html> 

    <head> 
    <script data-require="[email protected]" data-semver="1.4.2" src="https://code.angularjs.org/1.4.2/angular.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <div id="app" ng-app="app"> 
    <div ng-controller="mainCtrl"> 
      <my-directive ctrl-fn="ctrlFn(count)"></my-directive> 
     </div> 
     </div> 
    </body> 

</html>

的script.js

var app = angular.module('app', []); 

app.controller("mainCtrl", function($scope) { 
    $scope.count = 0; 
    $scope.ctrlFn = function() { 
     $scope.count = 0; 
     console.log('In mainCtrl ctrlFn!'); 
     $scope.count += count; 
    // console.log("count is: " + JSON.stringify($scope.count)); 
    //Call service here 
    }; 
}) 


.directive('myDirective', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     'count' : '&', 
     'ctrlFn' : '&' 
    }, 
    template: "<div><button ng-click='ctrlFn({count: 10})'>Click Here</button></div>", 
    link: function(scope, element, attributes) { 
     var count = null; 
     scope.ctrlFn = scope.ctrlFn({count: count}); 
     //scope.text = scope.fn({ count: 0 }); 
    } 
    }; 
});

我plunker是在這裏：http://plnkr.co/edit/6uDntNeqe0g343PmeCED?p=preview

能否原始獲得通過參與了這項使用參數案件？如果是這樣，我在這裏錯過了什麼？

後果：

萬一有人找這個語法：在angularjs文檔ctrlFn({count: 10})，它在這裏提到的下自定義指令：

通常它需要來自分離範圍傳遞數據通過表達式到父範圍，可以通過將局部變量名稱和值的映射傳遞到表達式包裝函數來完成此操作。例如，hideDialog函數會在隱藏對話框時顯示一條消息。這在指令中通過調用 close（{message：'now for now'}）來指定。然後，本地變量消息將在開 - 關表達式中可用。

來源

2017-02-10 James Drinkard

你已經犯了兩個錯誤：

scope.ctrlFn = scope.ctrlFn({count: count}); - 通過引用的函數該行覆蓋，並將其設置爲

undefined

將count的值傳遞給您的直接您應該使用=而不是&

下面是簡化示例的代碼。

的script.js：

var app = angular.module('app', []); 

app.controller("mainCtrl", function($scope) { 
    $scope.count = 0; 
    $scope.ctrlFn = function(count) { 
     console.log(count) 
     console.log('In mainCtrl ctrlFn!', count); 
     $scope.count += count; 
    //Call service here 
    }; 
}) 


.directive('myDirective', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     'count' : '=', 
     'ctrlFn' : '&' 
    }, 
    template: "<div><button ng-click='ctrlFn({ count: 100 })'>Click Here</button></div>" 
    }; 
})

的index.html：

<!DOCTYPE html> 
<html> 

    <head> 
    <script data-require="[email protected]" data-semver="1.4.2" src="https://code.angularjs.org/1.4.2/angular.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <div id="app" ng-app="app"> 
    <div ng-controller="mainCtrl"> {{count}} 
      <my-directive ctrl-fn="ctrlFn(count)"></my-directive> 
     </div> 
     </div> 
    </body> 

</html>

來源

2017-02-10 19:56:13

嗯，我有一件事吧，我問了一個問題，關於左右。感謝您的幫助！ –

我很高興我能幫助你。 –

我剛剛經歷了這個，所以有沒有辦法讓計數本身超出指令代碼，只需將一個值從ng-click傳遞到控制器就可以，而不必將它放入指令鏈接函數中？我試圖讓這個組件和封裝的功能，但我不希望指令知道任何關於價值本身，只是傳遞它。我想要在指令外設置值。 –

如何在指令鏈接函數中使用'＆'和參數調用控制器函數？

回答

相關問題