Angular JS two-way 绑定变量不更新 parent 作用域

Question

我对 AngularJS 指令的理解很差。我一直在尝试做的是将此 mediaLibrary 指令用作弹出窗口，因此我可以使用 vm.toggleMediaToSiteItem 将媒体库项目添加到投资组合项目（如图像到幻灯片）。此功能完美运行。但是，我试图通过单击 'media__freeze' div 在 parent 范围内切换指令的 'active' 变量以停用弹出窗口。 closePopup 函数没有更改 'vm.MediaPopup' 的值，而是在 mediaLibrary 指令的范围内创建了一个新的 'active' 变量。知道我做错了什么吗？下面是相关代码。

Parent 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

Angular JS two-way 绑定变量不更新 parent 作用域

Angular JS two-way bound variable does not update parent scope

javascript

angularjs

angularjs-directive

angularjs-scope