首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何将AngularJS指令中的值传递给父控制器中的函数

如何将AngularJS指令中的值传递给父控制器中的函数
EN

Stack Overflow用户
提问于 2018-08-16 03:43:20
回答 2查看 81关注 0票数 1

我使用的是Anguljarjs 1.4x。我试图将外部函数的值传回给指令。我以前做过一些类似的事情,但由于某种原因,函数参数没有返回给我的控制器。

这是一些我必须将外部函数传递给指令的有效plunker代码。我现在要做的是添加一个文本参数值。

index.html

代码语言:javascript
复制
<!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()"></my-directive> 
        </div>
      </div>

  </body>

</html>

myPage.html

代码语言:javascript
复制
<div>
  <button ng-click='ctrlFn()'>Click Here</button>
</div>

script.js

代码语言:javascript
复制
var app = angular.module('app', []);
app.controller('mainCtrl', function($scope){
  $scope.count = 0;
  $scope.ctrlFn = function() {
      console.log('In mainCtrl ctrlFn!');
      $scope.count += 10;
      console.log("count is: " + JSON.stringify($scope.count));
  };  
});

app.directive('myDirective', function() {
  return {
    restrict: 'E',
    scope: {
      'ctrlFn' : '&'
    },
   // template: "<div><button ng-click='ctrlFn()'>Click Here</button></div>",
   templateUrl: "./myPage.html",
    link: function(scope, element, attributes) {
      scope.ctrlFn();
      console.log("In link!");
    }
  };
});

当应用程序运行时,我得到这样的结果:在mainCtrl ctrlFn中!

计数为: 10

在链接中!

在我点击按钮后,我得到了这个: In mainCtrl ctrlFn!

计数为: 20

正如我所说的,这一切都是有效的,直到我添加了一个参数。我所要做的就是添加一个文本参数,但是当我在myPage.html中尝试这样做时,我得到了一个错误:

错误:无法使用' in‘运算符在'ctrlFn’中搜索'hello‘

代码语言:javascript
复制
 <button ng-click='ctrlFn('hello')'>Click Here</button>

我在ng-click函数中添加了一个文本值,然后在列出该函数的其他位置创建了一个参数。

关于如何做到这一点,有什么想法吗?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-08-16 03:55:34

在指令模板中使用:

代码语言:javascript
复制
template: `
    <button ng-click="ctrlFn({$event: 'hello'})">
       Click Here
    </button>
`,

按如下方式使用该指令:

代码语言:javascript
复制
<my-directive ctrl-fn="ctrlFn($event)"></my-directive> 

The DEMO on PLNKR

代码语言:javascript
复制
var app = angular.module('app', []);
app.controller('mainCtrl', function($scope){
  $scope.count = 0;
  $scope.ctrlFn = function(value) {
      $scope.count += 10;
      $scope.message = value;
  };  
});

app.directive('myDirective', function() {
  return {
    restrict: 'E',
    scope: {
      'ctrlFn' : '&'
    },
   template: `
      <div>
        <button ng-click="ctrlFn({$event:'hello'})">
          Click Here
        </button>
      </div>
    `,
    link: function(scope, element, attributes) {
      scope.ctrlFn();
    }
  };
});
代码语言:javascript
复制
<script src="//unpkg.com/angular@1.4/angular.js"></script>
<body ng-app="app" ng-controller="mainCtrl">
      <my-directive ctrl-fn="ctrlFn($event)"></my-directive> 
      message={{message}}<br>
      count={{count}}
</body>

使用表达式("&")绑定,定义属性:

代码语言:javascript
复制
<my-directive my-func="parentFn($event)">
</my-directive>

使用定义为本地变量的$event参数调用函数:

代码语言:javascript
复制
export default function myDirective() {
'ngInject';
    return {
        restrict: 'A',
        scope: {
            'myFunc': '&'
        },
        templateUrl: "./myPage.html",
        controller: myCtrl
    };

    function myCtrl($scope) {
        'ngInject';
        console.log("In myCtrl!");
        var answer = $scope.myFunc({$event: "Hello"});
        console.log(answer);
    }
}
票数 1
EN

Stack Overflow用户

发布于 2018-08-16 14:02:12

这里是你的代码的一个有效的插入器。

https://next.plnkr.co/edit/TWQEUUWq6h55uOIXDbuR

基本上,您需要从指令中删除括号

代码语言:javascript
复制
<my-directive ctrl-fn="ctrlFn"></my-directive>   

然后在调用函数之前(在指令中)展开它。

代码语言:javascript
复制
scope.ctrlFn = scope.ctrlFn();

此答案提供了有关展开函数的详细信息。

https://stackoverflow.com/a/27300517/1896352

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51865386

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档