首页 文章

如何使用带参数的'&'在指令链接函数内调用控制器函数？

提问于
浏览 次
0

我试图将一个参数传递给一个函数，在一个指令链接函数内部，类似于这个问题：Angular: calling controller function inside a directive link function using &

然而，虽然我已经看到了一些例子，比如这个：Passing Parameters from a Directive to a function和我没有看到任何你传递一个原语的地方，就像一个数字作为指令的参数传递给控制器函数 .

我尝试过多种方法，但还没有想出语法 .

HTML CODE:

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.4.2" 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 });
    }
  };
});

我的傻瓜在这里：http://plnkr.co/edit/6uDntNeqe0g343PmeCED?p=preview

原语是否可以作为此用例中的参数传入？如果是这样，我在这里错过了什么？

Aftermath:

如果有人在angularjs文档中寻找这种语法： ctrlFn({count: 10}) ，它在自定义指令下提到：

通常需要通过表达式将隔离范围中的数据传递到父作用域，这可以通过将局部变量名称和值的映射传递到表达式包装函数来完成 . 例如，hideDialog函数会在隐藏对话框时显示一条消息 . 这在指令中通过调用close（{message：'closing for now'}）指定 . 然后在on-close表达式中可以使用局部变量消息 .

angularjs angularjs-directive custom-directive

1 回答

  • 2

    你犯了两个错误：

    • 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="angular.js@1.4.2" 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>
    回复于

相关问题