2017-03-02 1 views
0

웹 사이트를 만들고 싶습니다. URL에 쿼리 문자열이 있으면 $ uiModal을 열고 싶습니다. 쿼리 문자열이 없으면 oepn이 없습니다. 코드는 다음과 같습니다URL에 queryString이있을 때 angularJS 모달을 여는 방법

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) 
+0

을 모달

의 Open 메서드를 호출하여 참조 할 수 있도록 TERS는

// 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'} 

당신이 얻을 및 초기화 방법에 상태를 유지할 수 있습니다이 방법을 사용하는 모든나요 귀하의 요구에 부응합니까? 그렇다면 대답을 수락 된 것으로 표시하고 그렇지 않으면 의견을 남겨주십시오. – trincot

답변

0

당신은 사용하여 URL 변경을 듣고 모달을 열 수있는 쿼리 문자열이 확인해야 보여 당신이 경로 PARAMS를 사용하는 경우

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

0

은 그 당신이 쿼리 문자열 parame을 보내는 경우 다른 현명한에 대한 ID를 얻을 것이다 올바른 참조 매개 변수 ID가 다음이 있다면 당신은 Angular $location

관련 문제