form inside angular modal not working - javascript

Here is my controller:
(function () {
'use strict'
angular
.module('inspinia')
.controller('myController', myController);
myController.$inject = ['$scope', '$uibModal'];
function myController($scope, $uibModal) {
function openModal() {
var modalInstance = $uibModal.open({
templateUrl: 'my_path/modal.html',
scope: $scope
});
};
}
})();
I have a button that opens the modal when calling openModal.
Here is my modal template:
<div class="inmodal" ng-controller="modalController">
<div class="row">
<form name="myForm" ng-submit="processForm()" ng-validate="" class="p-lg">
<div id="form-views" ui-view></div>
</form>
</div>
</div>
Here is the problem: when I open the modal with the form tag inside it I don't get the template that I'm expecting, I'm getting the page from where I am inside the modal. But when I comment the entire form, everything goes OK, but I need this form :)
What could be going on? There are no errors been shown in the console.
<div class="inmodal" ng-controller="modalController">
<div class="row">
<!--<form name="myForm" ng-submit="processForm()" ng-validate="" class="p-lg">
<div id="form-views" ui-view></div>
</form>-->
</div>
</div>
That works.
I'm new with angular. If any info is missing, please tell me :)
That's the modal I'm using.
EDIT
Actually, the problem is with <div id="form-views" ui-view></div>, this div is used with this wizard.

Related

Load view on button click with Angularjs in single page application

I am very new to AngularJS. This is my first project so please forgive me if my question is very basic.
I am created a page using simple HTML and put three button on it.
On these button click I want to load views in the lowel part of screen.
Index.html
<body ng-app="MyApp">
<div class="tab" ng-controller="TabControlController">
<button class="tablinks" onclick="openTab(event, 'Environments')" ng-click="Views/EnvironmentsView.html">Environments</button>
<button class="tablinks" onclick="openTab(event, 'SIT_Downloader')" ng-click="Views/SITDownloaderView.html">Download PCP Client</button>
<button class="tablinks" onclick="openTab(event, 'Users')">PCP Users</button>
</div>
<div id="Environments" class="tabcontent" ng-controller="environmentController">
<div>
<div ng-view></div>
</div>
</div>
<div id="SIT_Downloader" class="tabcontent" ng-controller="SITDownloaderController">
<div>
<div ng-view></div>
</div>
</div>
<div id="Users" class="tabcontent">
<div>
<div ng-view></div>
</div>
</div>
</body>
Bootstrap.js
var MyApp= angular.module('MyApp', ['ngRoute'])
.config(function($routeProvider) {
$routeProvider
.when('/',
{
templateUrl: 'Views/EnvironmentsView.html',
controller: window.environmentController
})
.otherwise({ redirectTo: '/' });
});
views are very simple as of now...
<h3>PCP Users</h3>
<p>This screen will be used to add/remove users</p>
Can anyone help me to understand what I am missing here or redirect me to some page with full example of this.
This is single page application.
You can try instead of calling a function onclick of a button ,just link the route with anchor tag
Maintain the routes in separate js file
like:
(function() {
'use strict';
angular.module('app.home').config(appRoutes);
appRoutes.$inject = ['$routeProvider', '$locationProvider'];
function appRoutes($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: '../yourhtmlfile.html',
controller: 'controllerName',
resolve: {}
})
}
})();
Also you dont need to have multiple ng-view for each view
have a single ng-view
<div>
<div ng-view></div>
</div>
this helps in loading the html page when you click on the tag and loads the corresponding html file.
You have some problem in your sample.
1- change <button ng-click=".." ></button> to
you can use button also but you should crate a function that changes the current route to new route.
<button ng-click="changeRoute('/home')" >Home</button>
$scope.changeRoute = function(newRoute){
$location.path(newRoute);
}
2- wrong syntax for define controller in route.(put controller in each route)
3- Don't need to multiple ng-view
Demo

Using jquery from angular directive does not work

I am trying to implement jquery-ui's sortable on the elements inside the ng-repeat.
Problem : i cannot actually do the sortable action on the elements inside the ng-repeat.
I've checked for answers. My code seems similar to most answers which apparently work, but my code doesn't work
Below is the html snippet:
<div class="container-fluid rt-widget-list-dim-adj">
<div my-dir>
<div ng-repeat="widget in model.widgets" ng-switch="widget.widgetType">
<div ng-switch-when="HEADER">
<ng-include src="'views/widget/widget-header.view.client.html'">
</div>
<div ng-switch-when="IMAGE">
<ng-include src="'views/widget/widget-image.view.client.html'">
</div>
<div ng-switch-when="YOUTUBE">
<ng-include src="'views/widget/widget-youtube.view.client.html'">
</div>
</div>
</div>
</div>
my app.js:
(function(){
angular.module("myApp", ['ngRoute', 'myDir']);
})();
below is my custom directive:
(function () {
angular
.module("myApp", [])
.directive("myDir", makeSortable);
function makeSortable() {
var directive = {
restrict : 'ACE',
link : linker
};
function linker(scope, element, attrb) {
element.sortable();
}
return directive;
}
})();
element in linker function args is not jQuery, it is a jqLite wrapper.
If you want to apply jQuery, try this:
$j(element[0]).sortable();

Passing ng-repeat value into Ionic Modal

I have an ng-repeat for an array of users, and I want to be able to click on each user to display their detailed profile information in an Ionic Modal.
Here's the actual HTML:
<div ng-repeat='user in users track by $index' ng-click="openModal()">
<div class="col">
<div class="col profile-image" >
<img src="img/default_user.jpg" class="connect_image" /><br />{{user.name}}<br />
<span class="connect_subject">{{user.about}}</span>
</div>
</div>
</div>
And here's a sample Modal inside that template:
<script id="profile-modal.html" type="text/ng-template">
<div class="modal">
<ion-header-bar>
<h1 class="title">{{user.name}}</h1>
</ion-header-bar>
</div>
</script>
The question is, how do I pass the ng-repeat user variable into the modal, so I can access user.name?
You just have to apply the OpenModal() function to a particualr user, here is the code
<div ng-repeat='user in users track by $index' >
<div class="col">
<div class="col profile-image" ng-click="openModal(user)">
<img src="img/default_user.jpg" class="connect_image" />
<br />{{user.name}}
<br />
<span class="connect_subject">{{user.about}}</span>
</div>
</div>
</div>
And in function you can apply to the scope,
$scope.openModal = function(user) {
$scope.user = user;
$scope.modalCtrl.show();
};
Here is the working Codepen
You can pass $scope of parent controller to modal controller like that;
$ionicModal.fromTemplateUrl('my-modal.html', {
scope: $scope
});
Then you can use your parent scope's data in modal controller. And I saw now. You want to pass your user data that is in ngRepeat to modal controller.
In this case, your code should be the following;
$ionicModal.fromTemplateUrl('modal.html', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function(data) {
$scope.selectedUser = data;
$scope.modal.show();
}
Then, you can use your selected user data with selectedUser.
And you can take a look that.

AngularJS 1.3 Routing not working; Controller never called

I can't for the life of me get AngularJS to work properly. I am not messing with templates or anything of that nature yet, I'm just trying to get the call to the controller to work correctly.
Here is a portion of my homepage.html
<div class="row" ng-app="eventsApp">
<div class="column small-12 content">
<p>Temporary Test.</p>
<div ng-view></div>
<ul class="small-block-grid-2 medium-block-grid-4 large-block-grid-5 shots">
<li>
<div class="thumb">
<a href="#Testing">
<div class="ctr-show s1">
<div class="show"><i class="fa fa-search-plus fa-lg"></i></div>
</div>
<img src="/img/screenshots/thumbs/g" alt="">
</a>
</div>
</li>
...
Here is my app.js
'use strict';
var eventsApp = angular.module('eventsApp', [
'ngRoute',
'ngSanitize',
]);
alert("testing number 1");
eventsApp.config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/Testing', {
templateUrl : 'Views/AngularViews/temp.html',
controller : 'TestingController'
});
}]);
Later on in the app.js....
eventsApp.controller('TestingController',
function($scope) {
alert("testing number 2");
});
Can anyone spot what I'm doing incorrectly? It just isn't working at all. The first alert pops up just fine, the second one never pops up, even after using the correct route.
Thanks in advance.
This is my code in coffeescript that works, I cannot spot any error in your implementation (and since there is no error on console...)
App.config [
'$provide'
'$routeProvider'
($provide, $routeProvider) ->
$routeProvider
.when('/testing', {
templateUrl: 'test.hml'
controller : 'TestingController'
})
]
iDsign.App.controller('TestingController', ($scope)->
alert('something')
)

How to create a dialog in AngularJS, but load only the dialog content from the server

I know it might be a simple question, but I'm frustrated here, and I can't make it work. I'm new to AngularJS, and I'm trying to implement a modal dialog (or find one) with these conditions:
Dialog content might come from anywhere—a string template, a script template, or a template from a URL
Dialog title and actions will come from the caller, not the callee. In other words, the parent scope decides the title and which action buttons should exist in the modal dialog (many dialogs I found encapsulate the title and action buttons in the template itself, for example this one)
Content of the template should be totally independent from parent scope (caller). In fact, it might not even be written in AngularJS. It might use jQuery.
In case the loaded template is in AngularJS, it should encapsulate its controller. For example, ng-include doesn't like <script> tags.
There is a workaround for it (here, here and here) but the idea of decorating a script tag with text/javascript-lazy is very smelly and dirty, let alone that I want the content HTML to be self-contained and executable in case it's not loaded as the content of an AngularJS modal dialog.
Communication between the parent scope and the content should be done via a common contract (JavaScript events come to my mind)
I've tried ngDialog, but the problem is that the container should pass the controller to the loaded template. That's not what I want.
In Bootstrap dialog also it seems that you have to pass the controller from the parent scope to the dialog content. This breaks the very notion of encapsulation. It's not desirable. Also, it's dependent on dialog result, which is not desirable either.
I recommend use Angular-UI library. You can easy create any dialog a-la "Twitter Bootstrap":
Include js in your page head.
<script src="/desktop/libs/angular-bootstrap/ui-bootstrap.js"></script>
<script src="/desktop/libs/angular-bootstrap/ui-bootstrap-tpls.js}"></script>
Include modules at app initialization.
var Application = A.module('MyApp', [ 'ui.bootstrap', 'ui.bootstrap.modal' ]);
Inject in jour controller $modal:
(function (A){
"use strict";
A.module("MyApp").controller("OpenDlg", [ "$scope", "$modal", function($scope, $modal){
$scope.openDlg = function(){
$modal.open({
controller : 'CategoryAddController',
templateUrl : '/admindesktop/templates/category/add/'
}).result.then(function(modalResult){
console.log(modalResult);
});
};
} ]);
}(this.angular));
For example, simple template for dialog:
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title text-center">Создание новой категории</h4>
</div>
<form class="modal-body form-horizontal" name="categoryForm">
<div class="form-group">
<label for="name" class="control-label col-xs-3">Название</label>
<div class="col-xs-9">
<input name='name' type="text" class="form-control" ng-model="category.name" maxlength=50 required ng-required="true"/>
</div>
<div class="row has-error" ng-show="errors.name">
<p ng-repeat="error in errors.name">{{ error }}</p>
</div>
</div>
<div class="container-fluid" ng-show="errors.length > 0">
<div class="row">
<p class="text-center text-danger" ng-repeat="error in errors">{{ error }}</p>
</div>
</div>
</form>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="save()" ng-disabled="categoryForm.$invalid">Сохранить</button>
<button class="btn btn-default" ng-click="cancel()">Отмена</button>
</div>
</div>
Main: controller for modal window:
(function(A) {
"use strict";
var app = A.module('MyApp');
app.controller('CategoryAddController', [ '$scope', '$modalInstance', 'Category', 'growl', function($scope, $modalInstance, Category, growl) {
$scope.save = function() {
var category = new Category($scope.category);
category.$save(function() {
growl.success('Категория успешно создана');
$modalInstance.close(true);
}, function(response) {
$scope.errors = response.data;
});
};
$scope.cancel = function() {
$modalInstance.close(false);
};
} ]);
}(this.angular));
I use Service for data changing between modal controller and parent scope:
(function(A){
"use strict";
A.module("MyApp").service('Storage', function(){
return {
storedData: undefined
};
});
}(this.angular));
In parent scope:
Storage.storedData = ...; //For example, selected row of table
In modal controller:
$scope.item = Storage.storedData; //Selected row of table
Also angular have special module type, value.

Categories