无法设置角度组件中的绑定属性的值

我正在试图为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-*值都不是显示埃弗斯。

任何想法有什么不对？

来源

2016-04-29 BetaRide

您组件的用法不正确。如果你想传递一个字符串应该被引用：

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

来源

2016-04-29 08:33:24 dfsq

谢谢。拯救了我的一天！是否有关于必须进入绑定属性值的预期语法的解释？ – BetaRide

我确定你可以在文档中找到关于此的信息。但是，我可以用简单的语言来解释它。所以你有3种类型的绑定和2种类型的属性值。绑定：'='双向绑定 - 接受和表达，值应该看起来像普通的JS代码。这就是为什么你不能将'{{}}'写成'='表达式，因为它不是有效的JS。 'test：'@'' - value必须是一个字符串：'test =''quoted string'“'或'test =”{{someExpression}}“'，因为在解析和评估模板{{someExpression}}之后'将扩展为字符串，与'''''''''相同。 – dfsq

'测试：'＆''绑定期望值可以被调用（就像它是一个函数）或基本上传递给'eval'。所以当你处理'='（或'<'）时，你需要该属性的值是一个有效的JS表达式。有效表达式的例子（比如在JS中）：someObj，some string，someObj.prop。无效表达式的示例：'{{something}}'，'some/path.html'（这就是为什么在ngInclude中，如果它是静态字符串，则需要引用路径）。 – dfsq

无法设置角度组件中的绑定属性的值

回答

相关问题