Question

Angular Newbie问题：

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

然后我想让我的HTML将这些计算值作为参数发送到指令myDirective。我该怎么做？我假设将这些值附加到范围会很好。

以下代码不起作用。

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

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

这种行为更令人困惑，因为当我将文字值作为参数发送到HTML第6行中的myDirective时，它可以完美地运行。 console.log行＃21＆amp; ＃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 个答案:

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

1 个答案:

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