angularjs指示双方向結合does'nt仕事

Question

こんにちは私は私のコントローラと私の指示との間の双方向結合に問題があります。

これは、HTMLで

<map-brands brands="brands" focused-brands="focusedBrands" add-brand-input="addBrandInput" suggestions="suggestions" open-brand-tab="openBrandTab(data)" remove-brand="removeBrand(data)" brands-boolean="brandsBoolean" brand-arrow="brandArrow(data)" add-brand-input-change="addBrandInputChange(data)" add-the-brand="addTheBrand(data)" add-brand-iterator="addBrandIterator"> 

     </map-brands> 

これは指令

scope:{ 
      "suggestions": '=?', 
      "brands": '=?', 
      "focusedBrands": '=?', 
      "addBrandInput": '=?', 
      "removeBrand": "&", 
      "openBrandTab": "&", 
      "brandsBoolean": "=?", 
      "brandArrow": "&", 
      "addBrandInputChange": "&", 
      "addTheBrand": "&", 
      "addBrandIterator":"=?" 
      }, 
    templateUrl: '/views/directives/mapBrands.html' 

である。これは問題とのJS機能：

$scope.addTheBrand = function(data){         
     $scope.addBrandInput = 'SomeText'; 
     console.log("$scope.addBrandInput",$scope.addBrandInput);   

}; 

そして最後に、テンプレート：

<div class="brands-add-container" ng-if="brandsBoolean"> 
      <input type="text" class="brandsAdd" ng-keydown="brandArrow({data:$event})" ng-model="addBrandInput" placeholder="ADD BRAND(S)" ng-change="addBrandInputChange({data:addBrandInput})" /> 
      <span class="listOfSuggestions" ng-if="addBrandInput != '' "> 
       <span class="suggestion" ng-repeat="(key, value) in suggestions" ng-click="addTheBrand({data:value})" ng-class="{'activeBrand' : addBrandIterator == key}"> {{value}} </span> 
      </span> 
     </div> 

0私は INPUTにテキストを入力し、その後、私は addTheBrand機能に応じ（最後のスパンにあります）、入力されたテキストが変更されていないNG-クリッククリックしたときに

問題があります。

--- console.logには、addBrandInputが「someText」に変更されていますが、入力には挿入されていません。

---私はディレクティブとコントローラ機能を使用してCodePenに簡単な例を試してみた、それが働いた...

は、それがプロジェクトの構造に問題があることだろうか？ もしそうなら、どこで問題を探すべきですか？

Answer 1

オブジェクトは参照によって渡され、プリミティブ型（文字列、数値、ブール値）は値渡しです。変数addBrandInputが文字列の場合は、参照型に変更する必要があります。そうしないと双方向バインディングは機能しません。

$scope.addTheBrand = function(data){         
     $scope.addBrandInput = { 
     label: 'SomeText' 
     } 
     console.log("$scope.addBrandInput",$scope.addBrandInput);   

};