Question

我正在尝试为角度组件实现绑定属性，如component documentation和this example中所述。

不幸的是，我从未使用过我在标签级别或$onInit方法中分配的值。当我将其用作模型值时，也不会打印该值。

我的约束定义：

(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>

无法在角度组件中设置bound属性的值

1 个答案: