AngularJS-传递函数指向

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (57)

我有一个例子angularjs

<div ng-controller="testCtrl">

<test color1="color1" updateFn="updateFn()"></test>
</div>
 <script>
  angular.module('dr', [])
.controller("testCtrl", function($scope) {
    $scope.color1 = "color";
    $scope.updateFn = function() {
        alert('123');
    }
})
.directive('test', function() {
    return {
        restrict: 'E',
        scope: {color1: '=',
                updateFn: '&'},
        template: "<button ng-click='updateFn()'>Click</button>",
        replace: true,
        link: function(scope, elm, attrs) { 
        }
    }
});

</script>
</body>

</html>

我想当我点击按钮时,警报框会出现,但没有显示。

提问于
用户回答回答于

也许我遗漏了什么,但是尽管其他解决方案确实调用了父作用域函数,但是没有能力从指令代码传递参数,这是因为update-fn打电话updateFn()具有固定的参数,例如{msg: "Hello World"}。只要稍加修改,指令就可以传递参数,我认为这更有用。

<test color1="color1" update-fn="updateFn"></test>

注意,HTML传递的是一个函数引用,即没有()方括号。

JS

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

app.controller("testCtrl", function($scope) {
    $scope.color1 = "color";
    $scope.updateFn = function(msg) {        
        alert(msg);
    }
});

app.directive('test', function() {
    return {
        restrict: 'E',
        scope: {
            color1: '=',
            updateFn: '&'
        },
        // object is passed while making the call
        template: "<button ng-click='callUpdate()'>
            Click</button>",
        replace: true,        
        link: function(scope, elm, attrs) {       
          scope.callUpdate = function() {
            scope.updateFn()("Directive Args");
          }
        }
    }
});

所以在上面,HTML调用本地作用域callUpdate函数,然后从父作用域“获取”updateFn,并使用指令可以生成的参数调用返回的函数。

用户回答回答于

若要从隔离作用域指令中调用父作用域中的控制器函数,请使用dash-separatedHTML中的属性名就像OP所说的那样。

此外,如果要向函数发送参数,则通过传递一个对象来调用该函数:

<test color1="color1" update-fn="updateFn(msg)"></test>

JS

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

app.controller("testCtrl", function($scope) {
    $scope.color1 = "color";
    $scope.updateFn = function(msg) {        
        alert(msg);
    }
});

app.directive('test', function() {
    return {
        restrict: 'E',
        scope: {
            color1: '=',
            updateFn: '&'
        },
        // object is passed while making the call
        template: "<button ng-click='updateFn({msg : \"Hello World!\"})'>
            Click</button>",
        replace: true,        
        link: function(scope, elm, attrs) {             
        }
    }
});

扫码关注云+社区