开发者问题收集

当 URL 包含查询字符串时,如何打开 angularJS 模式

2017-03-02
512

我想开发一个网站。当 URL 包含查询字符串时,我想打开 $uiModal。如果没有查询字符串,则不会打开任何模式。代码是:

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)
2个回答

您需要使用监听 URL 更改并检查是否有查询字符串来打开模式:

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

Sn0opr
2017-03-02

查看您是否正在使用路由参数,那么这是正确的,您将获得 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

Jayant Patil
2017-03-02