Question

在我的angularjs应用程序中，我使用UI Bootstrap来创建模态。我将范围和自定义控制器传递给模态，它从原始范围显示我的数据但不能执行任何功能。我有主控制器：

myapp.controller('WsCtrl', function WsCtrl($scope, $location, todoStorage, filterFilter, $modal, $log) {

在控制器中我有下一个：

$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function () {
    var modalInstance = $modal.open({
        templateUrl: 'partials/users.html',
        scope: $scope,
        controller: ModalInstanceCtrl,
        resolve: {
            items: function () {
                return $scope.items;
            },
            users: function(){
                return $scope.users;
            },
            CurrentDate: function(){
                return $scope.CurrentDate;
            }
        }
    });

    modalInstance.result.then(function (selectedItem) {
        console.log(selectedItem);
    }, function () {
        $log.info('Modal dismissed at: ' + new Date());
    });
};

而且我在控制器外还有另一个功能：

var ModalInstanceCtrl = function ($scope, $modalInstance, items) {

    $scope.items = items;
    $scope.users = users;
    $scope.CurrentDate = CurrentDate;
    $scope.selected = {
        item: $scope.items[0]
    };
    $scope.num = 11;

    $scope.ok = function () {
        $modalInstance.close($scope);
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
};

当我将范围传递给模态时 - 我可以看到我的所有用户，但我无法在原始范围内添加一个'导致问题。

Answer 1

您不需要scope: $scope。 resolve参数负责将变量传递给ModalInstanceCtrl。但是你必须将这些参数添加到它的依赖项中（它们的名称必须与resolve中的名称相匹配），所以如果你有：

resolve: {
    foo: function(){
        return $scope.something
    }
}

然后你必须

var ModalInstanceCtrl = function ($scope, $modalInstance, foo) {
    $scope.foo = foo;
    // ...
}

哦，函数可以像resolve中的其他变量一样传递：

resolve: {
    someFunction: function(){
        return $scope.someFunctionFromOriginalScope
    }
}

此外，您可以在resolve部分中注入任何其他服务，并在其中执行其他逻辑：

resolve: {
    someFunction: function(configService){
        if (configService.isProduction){
            return angular.noop;
        } else {
            return $scope.someFunctionFromOriginalScope;
        }
    }
}

Answer 2

如果你真的需要传递一个自定义范围（即，如果你想避免不总是满足依赖注入），你可以这样做：

$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function () {
    var modalInstance = $modal.open({
        templateUrl: 'partials/users.html',
        scope: function() {
            var scope = $rootScope.$new();
            scope.items = $scope.items;
            scope.users = $scope.users;
            scope.currentDate = $scope.currentDate;
            scope.someFunction = function () {
                // do some stuff with scope.items
            }
            return scope;
        }(),
        controller: 'ModalInstanceCtrl'
    });

    modalInstance.result.then(function (selectedItem) {
        console.log(selectedItem);
    }, function () {
        $log.info('Modal dismissed at: ' + new Date());
    });
};

你的控制器看起来像这样：

var ModalInstanceCtrl = function ($scope, $modalInstance) {
    // Your controller already has $scope.items, $scope.users, $scope.currentDate and $scope.someFunction

    $scope.selected = {
        item: $scope.items[0]
    };
    $scope.num = 11;

    $scope.ok = function () {
        $modalInstance.close($scope);
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
};

AngularJS UI Bootstrap模式无法从范围执行功能

2 个答案: