angularjs директива двусторонняя привязка does'nt work

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> 

Проблема заключается в том, когда я печатаю текст в ВХОДА, а затем я нажмите нг щелкните (расположенный в последнем пролете), вводимый текст не меняется в зависимости от функции addTheBrand.

--- В console.log, который я разместил, addBrandInput изменен на «someText», но не на входе.

--- Я попытался простой пример в CodePen с помощью директив и функцию контроллера, он работал ...

Может это быть проблемой в структуре проекта? Если да, то где я должен искать проблему?

Answer 1

Объекты передаются по ссылке, а примитивные типы (строка, число и логическое значение) передаются по значению. Переменная addBrandInput - это строка, вы должны изменить ее на ссылочный тип, иначе двусторонняя привязка не будет работать.

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

};