0

我们正在使用 Angular 1.4.2，我正在尝试使用 ng-click 从指令中获取计数值，将其传递给函数，然后将其传递给父控制器。经过一番努力，它在 plunker 中工作，但不幸的是，当我尝试将此功能移回主代码时，我无法让控制器绑定到隔离范围。

应该很简单，但是我尝试将当前控制器注入指令并尝试创建一个新控制器，但是当我按下按钮时没有任何反应。

这是代码：

模板：

<!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 = count + 10)"></my-directive> 
        </div>
      </div>
  </body>

</html>

脚本：

var app = angular.module('app', []);
app.controller('mainCtrl', function($scope){
  $scope.count = 0;
  $scope.ctrlFn = function() {
      console.log('In mainCtrl ctrlFn!');
      //$scope.count += 10; Old hardcoded value.
      console.log("count is: " + JSON.stringify($scope.count));
    //Call service here
  };  
});

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

这是我试图在主代码库中修改的模板代码：

<div>
    <div layout="row">
        <results-loader ctrl-fn="ctrlFn(count = count + 10)"></results-loader>
        <md-button class="md-raised md-primary md-button" ng-click="ctrlFn()" flex>Click Me</md-button>
    </div>
</div>

这是我在指令中使用现有控制器作为父控制器的地方。它是在路由中定义的，而不是在 ng-controller 中定义的，并且已经用于此视图。

myresultsCtrl.$inject = ['$scope', ' myService'];
        /* @ngInject */
        function myresultsCtrl($scope, myService) {
            $scope.count = 0;
etc...

但是，它显然没有正确绑定，因为我从未使用 ng-click 命中指令或此函数。

就像我说的，我尝试在模板中添加一个新的控制器，然后我尝试将现有的控制器注入到指令中，但都没有奏效。我从指令中取出模板并尝试使用 ctrl-fn 将 ng-click 直接放入模板中，但我不知道如何将点击与对指令的 ctrl-fn 属性的调用连接起来都在模板中？这里的想法是将模板移动到它自己的 html 文件中并从指令中引用它，如：模板：“myFile.html。我试图尽可能地封装它以使其成为可重用的组件。

我没有太多使用自定义指令。

这是plunker的直接链接。

4

2 回答 2

0

我不知道您的确切任务，但请重新考虑您的架构。为什么要计算指令中的值？在您的简单情况下，最好计算服务或控制器中的值，而不是指令。

指令中的注入控制器是反角模式。你需要重新考虑你的意图。最好将数字传递给指令，在那里进行计算并将您的数字发送回控制器。由于双向数据绑定，它无需额外代码即可工作。这是您的 plunker 的一个分支： http ://plnkr.co/edit/KpB6bv5tHvXSvhErLcEp?p=preview 主要部分是指令的定义： <div><span>{{count}}</span><br /><button ng-click='myFunction()'>Calculate</button></div>

于 2017-02-07T15:37:49.323 回答
0

我不想回答我自己的问题，因为这可能会产生负面影响，但在这种情况下，我不知道我是否可以很好地解释这个问题以获得正确的答案。让我失望的是将我的工作 plunker 代码集成到我们现有的代码库中。

我陷入困境的是如何为这个用例正确设置控制器。虽然我在模块中声明了我的控制器并注入了控制器，因为它已经绑定到该视图，但我需要在指令本身中定义控制器。一旦我把这三个都一起做了，一切都开始工作了。

以下是一些代码片段：

angular.module('directiveName', [])
        .directive('directiveName', directiveName)
        .controller('injectedCtrl', injectedCtrl)
        etc...

var directive = {
        restrict: 'E',
        scope: {
            'ctrlFn' : '&'
        },
        template: "<div><button ng-click='ctrlFn()'>Click Here</button></div>",
        controller: "injectedCtrl",
        link: function(scope, element, attributes) {
            scope.ctrlFn(); //This will pass to the parent controller: injectedCtrl, where $scope resides.
        }
    }
    return directive;   
}


injectedCtrl.$inject = ['$scope', 'myService'];
    /* @ngInject */
    function injectedCtrl($scope, myService) {
    $scope.ctrlFn = function() {
        //do something
    }
    etc...

HTML 代码：

当从指令中单击按钮时，此处的 ctrlFn 是在 DDO 中我的指令隔离范围内的引用。这需要传入的外部函数，即： ctrlFn() 然后可以从指令中调用它来调用父控制器。

<div layout="row">
        <results-loader ctrlFn="ctrlFn()"></results-loader> 
    </div>

我发布此内容是为了帮助可能有此用例的其他人，因为要弄清楚这一点并不容易。

Dah Wahlins 的帖子更详细地讨论了这个主题：创建自定义 AngularJS 指令第 3 部分 - 隔离作用域和函数参数以及帮助我​​理顺思路的内容。

于 2017-02-08T23:37:22.573 回答