Угловая директива Двухсторонняя привязка не работает

Question

Я пытаюсь использовать двустороннюю привязку директивы, используя «=» в объекте области действия, но не работает, если я обновляю значение внутри функции обратного вызова внутри функции ссылки (не получая обновлено в контроллере).

Директива

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. $ Применять не горе rk тоже. Я что-то упустил? Пожалуйста, дайте мне знать. Благодарю.

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:"=?"}