如何使用父範圍中的參數執行函數？

有時需要從具有隔離範圍的指令調用父範圍中定義的函數。爲了引用在外部範圍中定義的功能，通常使用&。但它不允許在函數中發送參數。我可以使它只與=指令數據綁定一起工作。請考慮我的例子plnkr，讓我知道是否有可能使用&並將數據放入回調函數中。如何使用父範圍中的參數執行函數？

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

app.controller('MainCtrl', function($scope) { 
    function updateNumber(number){ 
    $scope.randomNumber = number; 
    } 
    $scope.randomNumber = 0; 
    $scope.updateNumber = updateNumber; 
}); 

app.directive('randomGenerator', function(){ 
    return { 
    scope:{ 
     onUpdate:'=' 
     ^^^^^^^^^^^^ 
     // I want to use '&', but cannot call onUpdate(something) 
    }, 
    restrict: 'E', 
    replace: true, 
    template: '<button ng-click="update()">Random</button>', 
    link: function(scope,elem,attrs){ 
     scope.update = function(){ 
      var random = Math.random(); 
      scope.onUpdate(random); 
     }; 
    } 
    }; 
});

的Html

<body ng-controller="MainCtrl"> 
    <h1>Random numbers generator </h1> 
    <random-generator on-update="updateNumber"></random-generator> 
    {{randomNumber}} 
    </body>

來源

2014-10-04 Warlock

請看這裏http://plnkr.co/edit/y0s43VQwpDb6Jyx3HzX9?p=preview

HTML：

 <body ng-controller="MainCtrl"> 
     <h1>Random numbers generator </h1> 
     <!-- Add name oF parametr in your directive [NUMBER] --> 
     <random-generator on-update="updateNumber(number)"></random-generator> 
     {{randomNumber}} 
     </body>

指令：

app.directive('randomGenerator', function() { 
    return { 
    scope: { 
     onUpdate: '&' 
    }, 
    restrict: 'E', 
    replace: true, 
    template: '<button ng-click="update()">Random</button>', 
    link: function(scope, elem, attrs) { 
     scope.update = function() { 
     var random = Math.random(); 

//passing parameter should be named and the name needs to match that on in HTML [NUMBER] 
     scope.onUpdate({ 
      number: random 
     }); 
     }; 
    } 
    }; 
});

來源

2014-10-04 21:06:16 sylwester

它的工作原理！謝謝！ – Warlock 2014-10-05 06:29:37

如何使用父範圍中的參數執行函數？

回答

相關問題