Question

我已经为简单的下拉列表编写了一个指令。点击一个值，我调用一个函数并更新值。

如果我记录'scope。$ parent.selectedItem'，我可以看到该值。但是在父控制器中没有更新。

这是指令代码

app.directive('buttonDropdown', [function() {
    var templateString =
    '<div class="dropdown-button">'+
    '<button ng-click="toggleDropDown()" class="dropbtn">{{title}}</button>'+
    '<div id="myDropdown" ng-if="showButonDropDown" class="dropdown-content">'+
    '<a ng-repeat="item in dropdownItems" ng-click="selectItem(item)">{{item.name}}</a>'+
    '</div>'+
    '</div>';

    return {
      restrict: 'EA',
      scope: {
        dropdownItems: "=",
        selectedOption: '=',
        title: '@'
      },
      template: templateString,
      controller: function($scope,$rootScope,$timeout) {
        $scope.selectedOption = {};
        $scope.showButonDropDown = false;
        $scope.toggleDropDown = function() {
            $scope.showButonDropDown = !$scope.showButonDropDown;
        };

        $scope.$watch('dropdownItems', function(newVal,oldval){
            if(newVal){
                console.log(newVal);
            }
        });

        $scope.selectItem = function(item){
            console.log(item);
$scope.selectedOption = item;
        }
      },
      link: function(scope, element) {
          scope.dropdownItems = scope.dropdownItems || [];
          window.onclick = function (event) {
            if (!event.target.matches('.dropbtn')) {
              scope.showButonDropDown = false;
            }
            console.log(scope.$parent);
        }
      }
    }
  }]);

这是我的HTML

<button-dropdown title="Refer a Friend" dropdown-items='dropDownList' selected-option='selectedItem'></button-dropdown>

这是我的控制器代码

$scope.$watch('selectedItem',function(newVal,oldVal){

            if(newVal){
                console.log("*** New Val** ");
                console.log(newVal);
            }
        });

我不明白一件事..如果我打印'scope。$ parent.selectedItem'，我可以看到该值。但它没有在控制器中更新。不明白，我错过了什么。任何人都可以帮助这个。提前谢谢。

Answer 1

尝试这种方式

 1. Try to $emit the scope variable in directive.
 2. get that in controller by using $on.


 Directive:
 $scope.$emit('selectedItem',scopeVariable);

 Controller:
   $scope.$on('selectedItem',function(event,newVal){
    if(newVal){
     // logic here
    }
 });

与孤立范围的双向绑定在AngularJs中不起作用

1 个答案: