Question

我正在尝试使用＆＃34; =＆＃34;的双向指令绑定在指令范围对象中，但是如果我更新链接函数内部的回调函数中的值（在控制器中没有更新），它就无法工作。

指令

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>

范围。$ 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:"=?"}

角度指令双向绑定不起作用

3 个答案: