如何將控制器函數計算出的值作為參數傳遞給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