如何使用父范围中的参数执行函数？

问题描述：

有时需要从具有隔离范围的指令调用父范围中定义的函数。为了引用在外部范围中定义的功能，通常使用&。但它不允许在函数中发送参数。我可以使它只与=指令数据绑定一起工作。请考虑我的例子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>

答

请看这里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 
     }); 
     }; 
    } 
    }; 
});

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

如何使用父范围中的参数执行函数？

相关推荐