[英]Unable to set the value of bound property in angular component
I'm trying to implement a bound property for an angular component as explained in the component documentation and this example . 我正在尝试为角度组件实现绑定属性,如组件文档和此示例中所述 。
Unfortunately the values I'm assigning at the tag level or in the $onInit
methods are never used. 不幸的是,我从未使用过我在标签级别或
$onInit
方法中分配的值。 Nor is the value printed when I use it as a model value. 当我将其用作模型值时,也不会打印该值。
You can find the full code on plunker . 你可以在plunker上找到完整的代码 。
My binding definition: 我的绑定定义:
(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);
Template: 模板:
<p>SearchResult for <span ng-model="$ctrl.searchFor"</span></span></p>
How it's used: 如何使用:
<h1>Main Window</h1>
<search-input on-start-search="$ctrl.startSearch(value)"></search-input>
<search-result search-for="nothing-ext"></search-result>
None of the nothing-*
values is evers shown. 没有显示任何
nothing-*
值。
Any ideas what's wrong? 有什么想法有什么不对吗?
The usage of you component is not correct. 您组件的使用不正确。 If you want to pass a string it should be quoted:
如果你想传递一个字符串,应该引用它:
<search-result search-for="'nothing-ext'"></search-result>
Then next problem is that this line 然后接下来的问题是这一行
<p>SearchResult for <span ng-model="$ctrl.searchFor"</span></span></p>
doesn't make sense, as ngModel directive is only valid for input controls. 没有意义,因为ngModel指令仅对输入控件有效。 You want ngBind or simple
{{ $ctrl.searchFor }}
: 你想要ngBind或简单
{{ $ctrl.searchFor }}
:
<p>SearchResult for <span ng-bind="$ctrl.searchFor"</span></span></p>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.