如何将控制器函数计算出的值作为参数传递给HTML中的指令？

Question

Angular新手问题：

我想在我的AngularJS控制器（ myController ）中运行一个函数myFunc ，该函数计算一些值aB和aC 。

然后，我想让我的HTML将这些计算出的值作为参数发送到指令myDirective 。 我该怎么做？ 我认为将这些值附加到作用域中会很好。

下面的代码不起作用。

我遇到的第一个问题是我不知道何时以及如何调用myFunc 。 当涉及到HTML中的第7行时，我希望myFunc已经运行。 我怎么做？

我的第二个（也是更大的）问题是，即使aB和aC的值由myFunc计算，附加到作用域并通过HTML作为myDirective参数myDirective ， console.log在该指令中的第21和＃22行仍将其报告为undefined 。 为什么？ 奇怪的是，无论如何它们都是通过template: 'aB={{aB}} aC={{aC}}'在屏幕上呈现的template: 'aB={{aB}} aC={{aC}}' 。 那怎么会发生呢？

因为当我在HTML的第6行中将文字值作为参数发送给myDirective时，此行为更加令人困惑，因为它可以正常工作。 console.log第21和＃22行正确报告了它们。 为什么会有所不同？

我的HTML：

 1  <body ng-app="myApp">
 2    <div ng-controller="MyCtrl">
 3      <div ng-view></div>
 4      <ul>
 5        <li>{{1+1}}</li>
 6        <li><my-directive a-b="null" a-c="'Goodbye'"></my-directive></li>
 7        <li><my-directive a-b="arguments.scopeAB" a-c="arguments.scopeAC"></my-directive>  </li>  
 8      </ul>
 9    </div>
10  </body>

我的JavaScript：

11  myApp = angular.module('myApp',[]);
12  myApp.directive('myDirective',function(){
13      return {
14          restrict:'E',
15          scope: {
16              aB: '=',
17              aC: '='
18          },
19          link: function(scope, element, attrs) {
20              console.log('scope = ', scope);
21              console.log('scope.aB = ', scope.aB);
22              console.log('scope.aC = ', scope.aC);
23          },
24          template: 'aB={{aB}} aC={{aC}}'
25      };
26  });
27  myApp.controller('MyCtrl', function($scope) {
28      var self = this;
29
30        self.myFunc = function(response) {
31          scope.arguments.scopeAB = 'Hello';
32          scope.arguments.scopeAC = 'World';
33        }
34      }
35  );
36

这是JSFiddle

Answer 1

您的代码有一些语法错误，这些错误导致控制器未初始化：

<div controller="myCtrl">应该是ng-controller和MyCtrl才能与您的控制器定义匹配，即<div ng-controller="MyCtrl">

通过对HTML所做的更改，以下控制器将在指令中正确设置值：

myApp.controller('MyCtrl', function($scope) {
  console.log('Controller\'s  function initializing some values on the Scope');
  $scope.scopeAB = 'Hello';
  $scope.scopeAC = 'World';
});

https://jsfiddle.net/9jobmz0w/

如何将控制器函数计算出的值作为参数传递给HTML中的指令？

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-01-15 01:09:36

如何将控制器函数计​​算出的值作为参数传递给HTML中的指令？

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-01-15 01:09:36

如何将控制器函数计算出的值作为参数传递给HTML中的指令？

解决方案1
1 已采纳 2016-01-15 01:09:36