無法設置角度組件中的綁定屬性的值

我正在試圖爲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

無法設置角度組件中的綁定屬性的值

回答

相關問題