Angularjs指令双向绑定不起作用

angularjs directive two way binding does'nt work

本文关键字：绑定 不起作用 指令 Angularjs      更新时间：2023-09-26

你好，我有我的控制器和我的指令之间的双向绑定的麻烦。

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

问题是当我在INPUT中键入一些文本时，然后我单击ng-单击(位于最后一个span中)，输入文本不会根据addTheBrand函数改变。

—在console.log中，我已经将addBrandInput更改为"someText"，但不在输入中。

—我已经尝试了一个简单的例子在CodePen使用指令和控制器函数，它工作…

可能是项目结构中的问题吗?如果是这样，我应该在哪里寻找问题?

对象通过引用传递，而基本类型(字符串、数字和布尔值)通过值传递。变量addBrandInput是一个字符串，您应该将其更改为引用类型，否则双向绑定将不起作用

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