User clicks on videoClick
<div ng-repeat="list in lists" ng-click="videoClick(list.src)">
{{list.src}}
</div>
This works and following executes.
$scope.videoClick = function(val) {
$log.info('received.');
var modalInstance = $uibModal.open({
size: 'lg',
templateUrl: '/views/video_modal.html',
animation: true,
backdrop: false,
controller: 'VideoController',
resolve: {
videoPath: function() {
return val;
}
}
});
};
Now i am trying to get the value of 'videoPath' but i am getting an error.
Inside 'VideoController'
angular
.module('tss.application')
.controller('VideoController', function(videoPath) {
"use strict";
});
*
Any idea why i am not able to get the value of 'videoPath' inside 'VideoController' ?
*
Can you try
angular
.module('tss.application')
.controller('VideoController',['videoPath',function(videoPath) {
"use strict";
}]);
Related
I've got my modal window in Angular JS. Could some body answer me how to add blur effect to body when I open this modal window.
vm.OpenLogin = function () {
var data = loginWizardService.getData().then(function (response) {
$("#loginWizard").append($compile(response.data)($scope));
$rootScope.modalInstance = $uibModal.open({
templateUrl: templUrl,
controller: OpenLoginWizardCtrl,
backdrop: 'static',
keyboard: false
});
});
};
Add a property called, backdropClass to $uibModal.open() method and give a class name
backdropClass: 'newClass'
backdropClass (Type: string) - Additional CSS class(es) to be added to a modal backdrop template.
$rootScope.modalInstance = $uibModal.open({
templateUrl: templUrl,
controller: OpenLoginWizardCtrl,
backdrop: 'static',
keyboard: false,
backdropClass: 'newClass'
});
Give this Css to that class,
.newClass
{
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
filter: url("https://gist.githubusercontent.com/amitabhaghosh197/b7865b409e835b5a43b5/raw/1a255b551091924971e7dee8935fd38a7fdf7311/blur".svg#blur);
}
So, the above class is added as a back-drop and the CSS is for adding BLUR effet to it.
Maybe someone knows a more correct solution to this problem. But I found a solution for myself.
(function () {
'use strict';
angular
.module('app.modal.window.open.service', [])
.factory('$modalWindowService', $modalWindowService);
$modalWindowService.inject = ["$http", "$uibModal", "$compile"];
function $modalWindowService($http, $uibModal, $compile) {
var modalInstance;
return {
openModal: function (urn, id, templateId, controller) {
$http({
method: 'GET',
url: urn
}).success(function (data, $scope) {
$("#" + id).append($compile(data)($scope));
modalInstance = $uibModal.open({
templateUrl: templateId,
controller: controller,
backdrop: 'static',
keyboard: false
});
return;
}).error(function () {
alert("error");
return null;
});
document.getElementById('main').classList.add("blur");
},
closeModal: function (templateId, controller) {
if (modalInstance !== undefined) {
modalInstance.close({
templateUrl: templateId,
controller: controller
});
}
document.getElementById('main').classList.remove("blur");
}
}
}
})();
enjoy it :)
I have a situation in the application, where I want to load an already available modal, in an iFrame of another application using the same codebase. For this I have used the following code :
new-user-module.js
(function () {
'use strict';
angular
.module('mo.pages.new-user.layouts', ['ui.router', 'ui.bootstrap', 'mo.pages.new-user.services'])
.config(['$stateProvider', newUserRouteConfiguration]);
function newUserRouteConfiguration($stateProvider) {
$stateProvider
.state('new-user', {
url: '/new-user',
onEnter: [
'mo.pages.new-user.services.NewUserPageService', function (newAttachmentPageService) {
newAttachmentPageService.openAttachmentModal();
}
]
});
}})();
new-user-service.js
(function () {
'use strict';
angular
.module('mo.pages.new-user.services')
.service('mo.pages.new-user.services.NewUserPageService', NewUserPageServiceFactory);
NewUserPageServiceFactory.$inject = [
'$stateParams',
'$modal'
];
function NewUserPageServiceFactory($stateParams, $modal) {
var service = {
openUserModal: openUserModal
};
return service;
function openUserModal() {
return function () {
$modal.open({
templateUrl: 'modules/pages/shared/modals/new-user/new-user-modal.html',
controller: 'mo.pages.shared.modals.NewUserModalController as vm',
windowClass: 'new-user-modal',
resolve: {
headerText: function() {
return 'header';
}
},
backdrop: 'static',
size: 'lg'
});
};
}
}})();
The issue, I am facing is that, the modal is loading, when the '/new-user' is getting called in the iFrame, but the templateUrl is not loading.
Check your console, I think you may find an error with your call to newAttachmentPageService.openAttachmentModal();
Since NewUserPageServiceFactory is registered as a service and not really a factory, it should not return anything. You should just be adding the method to the service object, for example:
function NewUserPageServiceFactory($stateParams, $modal) {
this.openUserModal = function() {
return function () {
$modal.open({
templateUrl: 'modules/pages/shared/modals/new-user/new-user-modal.html',
controller: 'mo.pages.shared.modals.NewUserModalController as vm',
windowClass: 'new-user-modal',
resolve: {
headerText: function() {
return 'header';
}
},
backdrop: 'static',
size: 'lg'
});
};
}
}
For a good illustration of the (slight) differences between services and factories see here
Let me know if this works
I think I'm missing something but cannot figure what.
Basically I'm trying to pass an object to the modal like below, but instead of getting the passed object I gets null...so I think is a problem with the scope but I'm new in Angular and need some help.
Controller
app.controller("musicViewModel", function ($scope, $http, $location, $uibModal, $log) {
$scope.selected = null;
$scope.open = function (item) {
$scope.selected = item;
$log.info('Open' + $scope.selected); // get right passes object
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: 'musicViewModel',
size: 'lg',
resolve: {
items: function () {
return $scope.selected;
}
}
});
};
$scope.toggleAnimation = function () {
$scope.animationsEnabled = !$scope.animationsEnabled;
};
});
View
<div class="row" ng-controller="musicViewModel">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li>
{{ selected }} // always gets null
</li>
</ul>
</div>
</script>
</div>
I'd suggest you to pass the scope of your own controller instead of passing same controller again, by doing that you can remove the resolve also.
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
scope: $scope, //passed current scope to the modal
size: 'lg'
});
Otherwise you need to create a new controller and assign that controller for modal while opening it.
When you use resolve, the map is injected into the given controller.
I recommend that u use a different controller to handle the modal functionality (separation of concerns).
I also recommend to use dependency injection to support minification of the code. Step 5 on the Angular tutorial wil explain this.
A simplified example of the modal controller would be.
(function () {
'use strict';
var app = angular.module('App');
app.controller('musicDetailController',
['$scope', '$uibModalInstance', 'items',
function ($scope, $uibModalInstance, items) {
$scope.items = items;
}]);
}());
You cannot pass an object directly.
I've tried all the solutions above, but wasn't really satisfied. I've solved the issue by writing a simple parser that enables you to pass both strings and objects directly to the modal, through the provided resolve function.
app.controller('ModalController', ['$uibModal', '$scope', function ($uibModal, $scope) {
// Initialize $modal
var $modal = this;
// Open component modal
$modal.open = function (component, size, data) {
// Init modal
var modalInstance = $uibModal.open({
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
component: component,
size: size || 'md',
resolve: parseResolve(data)
});
};
// Parse the resolve object
function parseResolve(data) {
if (typeof data === 'string') {
return {
data: function() {
return data;
}
}
}
else if (typeof data === 'object') {
var resolve = {};
angular.forEach(data, function(value, key) {
resolve[key] = function() {
return value;
}
})
return resolve;
}
}
}]);
When usings strings
Template:
<button ng-click="$modal.open('modalSomething', 'md', 'value'">
Click
</button>
Component:
bindings: {
resolve: '#'
}
When using objects
Template:
<button ng-click="$modal.open('modalSomething', 'md', {key1: value1, key2: value2})">
Click
</button>
Component:
bindings: {
resolve: '<'
}
I got the below code working:
this.OpenModal = function() {
var modalInstance = $uibModal.open({
url: "/name?parameter=" + $scope.Object.ParamValue,
templateUrl: 'views/module/page.html',
controller: myController
});
}
I have set up a plunkr here:
http://plnkr.co/edit/NdHqQJ?p=preview
I'm trying to push and pull the form data into the modal window when you click on the task. I have read that you can do this with the "resolve" property (seen below) of the modal but I have been unable to get it to actually work. Any insight would be greatly appreciated.
var modalInstance = $modal.open({
templateUrl: 'editTask.html',
controller: 'ModalInstanceCtrl',
size: size,
scope: $scope,
resolve: {
items: function () {
return $scope.items;
}
}
});
Please let me know if you need more details!
If you want to use resolve (you can) the nit will be like this for example:
$scope.open = function(size, task) {
var modalInstance = $modal.open({
templateUrl: 'editTask.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
task: function() {
return task
}
}
});
};
HTML:
<a ng-click="open('lg', noStoneTask)" style="cursor:pointer" tooltip-placement="top" tooltip="Open Task">{{noStoneTask.taskSubject}}</a>
Demo: http://plnkr.co/edit/NA71479d04Yw7hh2Twx8?p=preview
You have to pass the scope you want to resolve (pass to the modal) in the resolve. and resolve it in the modal controller.
Is this what you want to achieve?
http://plnkr.co/edit/Q0G79C?p=preview
I modified the modal to pass the noStoneTasks scope to the modal
//modal
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'editTask.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
noStoneTasks: function () {
return $scope.noStoneTasks;
}
}
});
};
I also modify the scope when the user click ok.
uxModule.controller('ModalInstanceCtrl', function ($scope, $modalInstance, noStoneTasks) {
$scope.ok = function () {
noStoneTasks[0].actHours++;
$modalInstance.close('save');
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
I am using a bootstrap modal
Controller.js -
$scope.open = function() {
var modalInstance = $modal.open({
animation: true,
templateUrl: 'views/template.html',
controller: 'controller2',
resolve: {
items: function() {
return $scope.values;
}
}
});
modalInstance.result.then(function(values) {
$scope.new_value = values;
}, function() {
});
};
I don't want to create a new controller since the modal should show values which are constantly changing in the current controller. What should I pass in place of controller2 if I modal to be in the same controller?
You could use the scope option instead of the controller:
$scope.open = function() {
var modalInstance = $modal.open({
animation: true,
templateUrl: 'views/template.html',
scope: $scope,
resolve: {
items: function() {
return $scope.values;
}
}
});
modalInstance.result.then(function(values) {
$scope.new_value = values;
}, function() {
});
};