Question

我对AngularJS指令的理解非常差。我一直试图做的是使用这个mediaLibrary指令作为弹出窗口，因此我可以使用vm.toggleMediaToSiteItem将媒体库项目添加到项目组合项目（如图像到幻灯片）。这个功能很完美。但是，我试图切换指令的活跃＆＃39;父范围内的变量通过单击“媒体_冻结”来停用弹出窗口。 DIV。 closePopup函数不是改变＆＃39; vm.MediaPopup＆＃39;的值，而是创建一个新的＆＃39; active＆＃39; mediaLibrary指令范围内的变量。知道我做错了什么吗？以下是相关代码。

父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
}
});

Controller 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双向绑定变量不会更新父作用域

1 个答案: