Angular 指令双向绑定不起作用

Question

我正在尝试在指令范围对象中使用“=”来使用双向指令绑定，但如果我在 link 函数内更新回调函数中的值，它就不起作用（未更新在控制器中）。

指令

app.directive("simpleDropdown",function($document,$compile){
    return {
        scope:{
            content:"=",
            array:"="
        },
        restrict:'EA',
        template:'<span class="simple-dropdown"><ul class="dropdown-menu"><li ng-repeat="i in array" data-index="{{$index}}"><a>{{i}}</a></li></ul></span>',
        compile:function(tElem,tAttrs){
            return function link(scope,elem,attrs){

                    //This is updated in the controller.
                    scope.content = scope.array[0];


                    var origin = angular.element(elem);
                    var dropdownSpan = origin.find(".simple-dropdown");
                    var dropdownMenu = $(dropdownSpan).find(".dropdown-menu");
                    dropdownSpan.prepend(scope.content);
                    var closeAllDropdowns = function(){
                        angular.element($document).find(".simple-dropdown .dropdown-menu").removeClass("show");
                    }
                    var handler = function(){
                            //close all dropdownMenus in simpleDropdown
                            closeAllDropdowns();

                        };
                    dropdownSpan.on("click",function(e){
                        e.stopPropagation();
                        closeAllDropdowns();
                        dropdownMenu.addClass("show");
                        var selectElement = function(event){
                            event.stopPropagation();
                            closeAllDropdowns();
                            console.log(scope.content);


                            //This is not updated
                            scope.content = angular.element(this).find("a").html();


                        };
                        dropdownMenu.find("li").off("click").on("click",selectElement);
                        $document.on("click",handler);
                        scope.$on("destroy",function(){
                        $document.off('click',handler);
                    });
                    }); 

            }
        }
    }
});

控制器

var module = angular.module("dataemoApp",["multiAutocomplete","simpleDropdown"]);


module.controller("mySuperAwesomeController",['$scope',function($scope){

$scope.assignee = "Bhargav";
$scope.assignees = [
    "Bhargav",
    "Akhilesh",
    "Utsav"
];
}]);

HTML

<simple-dropdown content="assignee" array="assignees"> </simple-dropdown>

Scope.$apply 也不起作用。我在这里错过了什么吗？请告诉我。谢谢

Answer 1

尝试使用对象属性而不是字符串进行操作：

scope:{
   content: { text: "="},
   array: {text: "="}
}

像这样：

app.directive("simpleDropdown",function($document,$compile){
    return {
        scope:{
           content: { text: "="},
           array: { value: "="}
        },
        restrict:'EA',
        template:'<span class="simple-dropdown"><ul class="dropdown-menu"><li ng-repeat="i in array.value" data-index="{{$index}}"><a>{{i}}</a></li></ul></span>',
        compile:function(tElem,tAttrs){
            return function link(scope,elem,attrs){

                    //This is updated in the controller.
                    scope.content.text = scope.array.value[0];


                    var origin = angular.element(elem);
                    var dropdownSpan = origin.find(".simple-dropdown");
                    var dropdownMenu = $(dropdownSpan).find(".dropdown-menu");
                    dropdownSpan.prepend(scope.content.text);
                    var closeAllDropdowns = function(){
                        angular.element($document).find(".simple-dropdown .dropdown-menu").removeClass("show");
                    }
                    var handler = function(){
                            //close all dropdownMenus in simpleDropdown
                            closeAllDropdowns();

                        };
                    dropdownSpan.on("click",function(e){
                        e.stopPropagation();
                        closeAllDropdowns();
                        dropdownMenu.addClass("show");
                        var selectElement = function(event){
                            event.stopPropagation();
                            closeAllDropdowns();
                            console.log(scope.content.text);


                            //This is not updated
                            scope.content.text = angular.element(this).find("a").html();


                        };
                        dropdownMenu.find("li").off("click").on("click",selectElement);
                        $document.on("click",handler);
                        scope.$on("destroy",function(){
                        $document.off('click',handler);
                    });
                    }); 

            }
        }
    }
});

Answer 2

您正在用新变量覆盖 scope.content。这个不会更新。尝试使用 scope.content.push('something') 或其他维护 scope.content.

对象引用的东西

Answer 3

绑定到数组时，您需要“=?”，而不是指令中的“=”

scope:{content:"=",array:"=?"}

Angular 指令双向绑定不起作用

Angular Directive Two Way Binding Not Working

javascript

angularjs

angularjs-directive