無法在角度組件中設置bound屬性的值

Question

我正在嘗試為角度組件實現綁定屬性，如組件文檔和此示例中所述 。

不幸的是，我從未使用過我在標簽級別或$onInit方法中分配的值。 當我將其用作模型值時，也不會打印該值。

你可以在plunker上找到完整的代碼 。

我的綁定定義：

(function(angular) {
  'use strict';

  function SearchResultController($scope, $element, $attrs) {
    var ctrl = this;
    ctrl.searchFor = 'nohting-ctor';

    ctrl.$onInit = function() {
      console.log('SearchResultController.$onInit: searchFor='+ctrl.searchFor);
      ctrl.searchFor = 'nothing-int';
    };

  }

  angular.module('myApp').component('searchResult', {
    templateUrl: 'searchResult.html',
    controller: SearchResultController,
    bindings: {
      searchFor: '<'
    }
  });
})(window.angular);

模板：

<p>SearchResult for <span ng-model="$ctrl.searchFor"</span></span></p>

如何使用：

<h1>Main Window</h1>
<search-input on-start-search="$ctrl.startSearch(value)"></search-input>
<search-result search-for="nothing-ext"></search-result>

沒有顯示任何nothing-*值。

有什么想法有什么不對嗎？

Answer 1

您組件的使用不正確。 如果你想傳遞一個字符串，應該引用它：

<search-result search-for="'nothing-ext'"></search-result>

然后接下來的問題是這一行

<p>SearchResult for <span ng-model="$ctrl.searchFor"</span></span></p>

沒有意義，因為ngModel指令僅對輸入控件有效。 你想要ngBind或簡單{{ $ctrl.searchFor }} ：

<p>SearchResult for <span ng-bind="$ctrl.searchFor"</span></span></p>