Angular JS双向绑定变量不更新父作用域

Question

我对AngularJS指令的理解很差。我一直在尝试使用这个mediaLibrary指令作为弹出窗口，这样我就可以使用vm.toggleMediaToSiteItem将媒体库项目添加到项目组合项目中(就像幻灯片中的图像)。这个函数工作得很好。但是，我正在尝试切换父作用域上指令的'active‘变量，通过单击'media__freeze’目录来停用弹出窗口。closePopup函数在mediaLibrary指令的作用域中创建一个新的'active‘变量，而不是更改'vm.MediaPopup’的值。知道我做错了什么吗？以下是相关代码。

父HTML

<div ng-controller="parent as vm">
    <p>{{vm.Media | json}}</p>
    <a class="button" ng-click="vm.MediaPopup = !vm.MediaPopup">Add media</a>
    <media-library selected-media="vm.Media" multi-select="true" popup="true" active="vm.MediaPopup"></media-library>
</div>

指令

<div class="media" ng-controller="mediaLibrary as lib" ng-class="popup ? 'popup' : ''">
<div ng-if="popup" class="media__freeze" ng-show="active" ng-click="lib.closePopup()">
    <img src="/cms/img/icons/close-white.png" alt="Close" />
</div>

指令JS

directive('mediaLibrary', function($http, $timeout, $route){
return{
    restrict: 'E', //invoked by attibutes
    scope: {
        selectedMedia: '=selectedMedia',
        multiSelect: '=multiSelect',
        popup: '=',
        active: '=active'
    },
    templateUrl:'js/directives/templates/media-library.html',
    bindToController: emuueMediaLibrary
}
});

控制器JS

function emuueMediaLibrary($scope, $http, $location, mediaService, toastr, queryString){
var vm = this;
vm.view = 0;
vm.MediaImages = []
vm.MediaAudio = [];
vm.MediaVideo = [];
vm.loading = true;
vm.Limit = 50000000;
//console.log($scope); 

vm.toggleMediaToSiteItem = function(arr, item){
    if(!$scope.multiSelect){
        $scope.selectedMedia.length = 0;
        angular.forEach(arr, function(media){
            if(item.Id != media.Id){
                media.Selected = false;
            }
        })
    }
    if(item.Selected){
        $scope.selectedMedia.push({Id: item.Id, Path: item.FilePath});
    }else{
        $scope.selectedMedia.splice($scope.selectedMedia.indexOf(item.Id), 1);
    }
}

vm.closePopup = function(){
    $scope.active = false;
}
}

Answer 1

这是因为双向绑定只适用于引用类型，而不适用于值类型，您必须将此活动字段包装在对象中才能使其正确工作。

检查此http://zcourts.com/2013/05/31/angularjs-if-you-dont-have-a-dot-youre-doing-it-wrong/#sthash.gXsaD1WA.dpbs