1. 程式人生 > >AngularJs1.x自定義指令獨立作用域的函式傳入引數

AngularJs1.x自定義指令獨立作用域的函式傳入引數

在定義指令的scope屬性如果設定成了{},那就成為了一個獨立作用域,如果要傳入一個方法,使用&,但是這裡的傳參有點不一樣。先看下官網解釋:

& or &attr - provides a way to execute an expression in the context of the parent scope. If no attr name is specified then the attribute name is assumed to be the same as the local name. Given and widget definition of scope: { localFn:’&myAttr’ }, then isolate scope property localFn will point to a function wrapper for the count = count + value expression. Often it’s desirable to pass data from the isolated scope via an expression and to the parent scope, this can be done by passing a map of local variable names and values into the expression wrapper fn. For example, if the expression is increment(amount) then we can specify the amount value by calling the localFn as localFn({amount: 22}).

這裡有個例子:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-app="app1">
<div ng-controller="MyCtrl">
    <div ng-repeat="item in items" my-component isolated-expression-foo="updateItem(item,temp)"
>
{{item|json}} </div> </div> </body> <script src="../scripts/angular.js"></script> <script> var myModule = angular.module('app1', []) .directive('myComponent', function () { return { restrict:'A', scope:{ isolatedExpressionFoo:'&'
}, link:function(scope,element,attr) { scope.isolatedExpressionFoo(); } }; }) .controller('MyCtrl', ['$scope', function ($scope) { $scope.items=[{id:1,value:"test"},{id:2,value:"TEst2"}]; $scope.updateItem = function (item,temp) { console.log("Item param "+item.id); console.log("temp param " + temp); } }]);
</script> </html>