Question

我想开发一个网站。我想在url有查询字符串时打开$ uiModal。如果查询字符串不存在则没有模态是oepn。代码是：

myApp.controller('jobObjectiveController', ['$scope', '$http', '$uibModal', 'EmployeeObjectiveService', '$routeParams', function ($scope, $http, $uibModal, EmployeeObjectiveService, $routeParams) {

$scope.init = function () {
    $scope.AddButton = 'Save';
    $scope.isProcessing = false;
    $scope.UpdateButton = 'Update';
}

var id = $routeParams.id;


var items = [];
for (i = 0; i <10; i++) {
    items[i] = i;
}
$scope.test = items;

$scope.Objective = {
    Title: '',
    KPI: '',
    Target: '',
    Weight: '',
    Note:''
}

$scope.init();

//Column Selection 
EmployeeObjectiveService.GetObjectiveColumnList().then(function (response) { $scope.ColumnList = response.data });
EmployeeObjectiveService.GetObjectiveSeletedColumnList().then(function (response) { $scope.SelectedColumn = response.data });
EmployeeObjectiveService.GetObjectiveSeletCol().then(function (response) { $scope.selectCol = response.data});

//Change Events for Multiple dropdown
$scope.changeEvents = {
    onItemSelect: function (item) {
        changeColumnViewShow(item);
    },
    onItemDeselect: function (item) {
        changeColumnViewShow(item);
    }
};

function changeColumnViewShow(item) {
    if (item.id == 1) {
        $scope.selectCol.Code = !$scope.selectCol.Code;
    } else if (item.id == 2) {
        $scope.selectCol.Title = !$scope.selectCol.Title;
    } else if (item.id == 3) {
        $scope.selectCol.KPI = !$scope.selectCol.KPI;
    } else if (item.id == 4) {
        $scope.selectCol.Target = !$scope.selectCol.Target;
    } else if (item.id == 5) {
        $scope.selectCol.Weight = !$scope.selectCol.Weight;
    } else if (item.id == 6) {
        $scope.selectCol.Note = !$scope.selectCol.Note;
    } else if (item.id == 7) {
        $scope.selectCol.Status = !$scope.selectCol.Status;
    }
}

//Multiple Dropsown Config
$scope.dropConfig = {
    scrollable: true,
    scrollableHeight: '200px',
    showCheckAll: false,
    showUncheckAll: false
}

//Group by Pending and Approve
EmployeeObjectiveService.getGroupItem().then(function (response) { $scope.GroupBy = response.data });

//Open Modal for Add Objective
$scope.addObjective = function () {
    var modalInstance = $uibModal.open({
        templateUrl: '/View/Modal View/addObejective.html',
        controller:'jobObjectiveController',
        scope: $scope,
        size: 'lg'
    });
}

//Open Modal for View Objective
$scope.viewObjective = function (data) {
    var modalInstance = $uibModal.open({
        templateUrl: '/View/Modal View/ObejectiveModal.html',
        controller: 'jobObjectiveController',
        scope: $scope,
        size: 'lg',
    });
}

//Open Modal for Update Objective
$scope.updateObjective = function (data) {
    $scope.Object = {
        Title: 'xgdsg',
        KPI: 'sgsg',
        Target: 'sgsg',
        Weight: 'sgsgggggg',
        Note: data
    }
    var modalInstance = $uibModal.open({
        templateUrl: '/View/Modal View/updateObejectiveModal.html',
        controller: 'jobObjectiveController',
        scope: $scope,
        size: 'lg'
    });
}


//Add the Objective
$scope.AddObjective = function (data) {
    $scope.AddButton = 'Saving...';
    $scope.isProcessing = true;
    if (!data) {
        alert("Submitting...");
        $scope.init();
    }else
        $scope.init();

}

//Update Objective
$scope.UpdateObjective = function (data) {
    $scope.UpdateButton = 'Updating...';
    $scope.isProcessing = true;
    if (!data) {
        alert("Submitting...");
        $scope.init();
    } else
        $scope.init();

}

if (id != null) {
    $scope.viewObjective(id);
}

当我使用查询字符串运行代码然后显示这些错误

TypeError: Cannot read property 'length' of undefined
at m.$scope.getButtonText (angularjs-dropdown-multiselect.min.js:1)
at fn (eval at compile (angular.min.js:1001), <anonymous>:4:230)
at angular.min.js:534
at m.$digest (angular.min.js:600)
at m.$apply (angular.min.js:610)
at l (angular.min.js:397)
at J (angular.min.js:417)
at XMLHttpRequest.t.onload (angular.min.js:420)

Answer 1

您需要使用url更改并检查是否有查询字符串来打开模式：

$rootScope.$on("$routeChangeStart", function(args){})

Answer 2

看看你是否正在使用路由参数，那么如果你要发送查询字符串参数然后使用

，你将获得其他明智的id是正确的

// given URL http://example.com/#/some/path?foo=bar&baz=xoxo
var searchObject = $location.search();
// => {foo: 'bar', baz: 'xoxo'}

// set foo to 'yipee'
$location.search('foo', 'yipee');
// $location.search() => {foo: 'yipee', baz: 'xoxo'}

通过这种方式你可以得到它并在init方法上保持条件，这样如果参数id在那里就可以调用模态的open方法

参考Angular $location

如果url有queryString

2 个答案: