When I call ngDialog no information that is in the template is displayed. It arrives to the DOM, but it isn't displayed.
This is the function where it is called:
controller.showPlan = function (plan) {
ngDialog.open({
template: 'client/src/organizer/app/planner/plan.html',
scope: $scope.this
});
};
This is the template:
<script type="text/ng-template">
<div class="ngdialog-message">
<h1>Template heading</h1>
<p>Content goes here</p>
</div>
This is the place in the main template where it is called:
<label ng-if="Planner.hasPlan(plan)" ng-click="Planner.showPlan(plan)">{{plan.title}}</label>
Everything works except ngDialog.
Add an id to your text/ng-template that matches the url of the template. So this template will be written to $templateCache with the name client/src/organizer/app/planner/plan.html & when you request the template it will be read from there ($templateCache).
HTML
<script type="text/ng-template" id="client/src/organizer/app/planner/plan.html">
<div class="ngdialog-message">
<h1>Template heading</h1>
<p>Content goes here</p>
</div>
</script>
Related
Can anybody help me.
In index.html, I run ng-view, which code corresponds to Routing.js file. The menu calls two pages main.html and product.htm.
main.htm, has included another page called filterApp.html.
I need to hide a page element that is embedded main.html the filterApp.html. I have not succeeded.
If I take the include and put the code directly into main.html works. I read that ng-ng-hide and include not working properly. Is there anything I can do. I need to have it in separate files.
Here is the code of the pages.
Thank you so much
Index.html
<html ng-app="appDataBoard">
<body ng-controller="mainController" >
<ul >
<li class="nav-item start open">
</li>
<li class="nav-item ">
</li>
</ul>
<div class="col-md-12 column sortable">
<div ng-view></div>
</div>
</body>
</html>
Main.html
<div class="jumbotron text-center">
<h1>main Page</h1>
<p>{{ message }}</p>
</div>
<!-- INCLUDE FILTER APPS-->
<div ng-include="'./template/filterApp.html'" ></div>
Product.html
<div class="jumbotron text-center">
<h1>Product Page</h1>
<p>{{ message }}</p>
p ng-hide="hide1">este parrafo se debe borrar</p>
</div>
filterApp.html
<div ng-hide="hselect1" >
<select id="select-1" multiple="multiple" onchange="RecargaSelectBU()" >
</select>
</div>
Routing.js
// create the module and name it dbApp
var dbApp = angular.module('appDataBoard', ['ngRoute']);
// configure our routes
dbApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/main', {
templateUrl : 'template/main.html',
controller : 'mainController'
})
// route for the about page
.when('/product', {
templateUrl : 'template/product.html',
controller : 'productController'
})
});
// create the controller and inject Angular's $scope
dbApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Pagina principal';
$scope.hselect1 = true;
});
dbApp.controller('productController', function($scope) {
$scope.message = 'Pagina de producto.';
$scope.hide1 = true;
});
Check this plunker link. Its working fine for me.
https://embed.plnkr.co/RZDGdnFEq1SmT7F3ncZa/
I have a HTML page with different sections, which are loaded with AJAX. I have created a controller for each of the sections.
How is possible to bind the controller on a section which has been dynamically added on HTML?
I have found very complicated solutions, which i don't even know if they apply.
I need the most basic, easiest solution, something similiar with ko.applyBindings($dom[0], viewModel) for the ones who worked with KnockoutJs.
Index html
<div class="row" ng-app="app">
<div class="col-xs-3">
<ul class="nav nav-pills nav-stacked">
<li>
Profile
</li>
</ul>
</div>
<div class="col-xs-9">
<div id="container"><!-- load dynamic HTML here --></div>
</div>
</div>
Dynamic HTML
<div ng-controller="profile">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
Javascript:
var app = angular.module('app', []);
app.controller('profile', function ($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
// load new HTML
// normally this is triggered by a link / button
$(function () {
$.get("/EditProfile/Profile", function (data, status) {
$("#container").html(data);
});
});
Don't use jQuery to embed html to your container. If you use jQuery, AngularJS can't track DOM manipulations and trigger directives. You can use ng-include directive of AngularJS.
In index.html file:
...
<div id="container">
<div ng-include="'/EditProfile/Profile'"></div>
</div>
...
If you want you can make that conditional:
...
<div id="container">
<div ng-if="profilePage" ng-include="'/EditProfile/Profile'"></div>
</div>
...
With that example, if you set profilePage variable to true, profile html will be load and render by ng-include.
For detailed info take a look to ngInclude documentation.
By the way, best practice to include views to your layout by triggering same link clicks is using routers. You can use Angular's ngRoute module or uiRouter as another popular one.
If you use ngRoute module, your index.html looks like that:
<div class="row" ng-app="app">
<div class="col-xs-3">
<ul class="nav nav-pills nav-stacked">
<li>
Profile
</li>
</ul>
</div>
<div class="col-xs-9">
<div id="container" ng-view><!-- load dynamic HTML here --></div>
</div>
</div>
And with a router configuration like below, profile html will be automatically loaded and rendered by ngRoute inside ngView directive:
angular.module('myapp', []).config(function($routeProvider) {
$routeProvider
.when('/profile', {
templateUrl: '/EditProfile/Profile',
controller: 'ProfileController'
});
});
$valid does not work on dynamically loaded forms via ng-include or I do a mistake (I can't change the style of the Box on form validation):
Here is the plunker: http://plnkr.co/edit/WA5ohXoMrb5QcUdl0uwe?p=preview
If the text input field is filled, the color should be changed from black to green.
HTML
<body ng-controller="MainController">
<div class="menu-mantle">
<div ng-repeat="item in my.forms" class="menu-box">
<div class="auWizard-default" ng-class="{
'auWizard-valid': {{item.form_name}}.$valid,
'auWizard-invalid': {{item.form_name}}.$invalid}">
</div>
<div class="menu-default" ng-click="my.getForm(item.form_name)">
{{item.form_name}}
</div>
</div>
</div>
<h4>Forms will be included below:</h4>
<div class="form-area">
<h5>{{my.src}}</h5>
<ng-include src="my.src">
</ng-include>
</div>
</body>
Tracking current Form name in controller by
$scope.my.getForm= function (form) {
$scope.currentform=form;
$scope.my.src=form+".html";
}
I moved <form> tag from individual file to index file and it is working now.
<form name={{currentform}}>
<ng-include src="my.src">
</ng-include>
</form>
Working plunker link
Try this
<body ng-controller="MainController">
<div class="menu-mantle">
<div ng-repeat="item in my.forms" class="menu-box">
<div class="auWizard-default" ng-class="{
'auWizard-valid': isFormValid(item.form_name),
'auWizard-invalid': !isFormValid(item.form_name)}">
</div>
<div class="menu-default" ng-click="my.getForm(item.form_name)">
{{item.form_name}}
</div>
</div>
</div>
<h4>Forms will be included below:</h4>
<div class="form-area">
<h5>{{my.src}}</h5>
<ng-include src="my.src">
</ng-include>
</div>
</body>
In your controller
$scope.isFormValid = function(formName){
var formSelector = 'form[name='+formName+']';
var formEle = $(formSelector);
var formScope = angular.element(formEle).scope();
if(formScope){
return formScope[formName].$valid;
}
}
I have the following structure:
<html>
<head>
// additional info here
</head>
<body data-ng-app="myApp" data-ng-controller="contentController">
<div id="container">
<div id="id1">
//content here
</div>
<div id="id2">
//content here
</div>
<div id="id3">
//content here
</div>
<div id="page-content">
<div data-ng-view="">
//here will be loaded the other views
//Example: /profile, /login, /register, etc etc)
</div>
</div>
</div>
</body>
</html>
What I need is to hide the divs: id1, id2, id3 when the user navigates to specific pages like /login or register. For all other pages the divs: id1, id2, id3 should be visible.
At the moment when the user navigates to /login the divs: id1, id2, id3 content is shown with the login form so I have to hide it somehow.
The divs: id1, id2, id3 are common for all pages except for /login, /register and /forgot.
You can use the $locationChangeSuccess event broadcasted from the $rootScope to check the current route using the $route service. The advantage of this methodology, is that navigation through the use of the address bar can still be detected.
DEMO
JAVASCRIPT
.controller('contentController', function($scope, $rootScope, $route) {
var paths = ['/login', '/register', '/forgot'];
$rootScope.$on('$locationChangeSuccess', function() {
var $$route = $route.current.$$route;
$scope.contentVisibility = $$route && paths.indexOf($$route.originalPath) < 0;
});
});
HTML
<body data-ng-app="myApp" data-ng-controller="contentController">
<div id="container">
<div id="id1" ng-show="contentVisibility">
//content here
</div>
<div id="id2" ng-show="contentVisibility">
//content here
</div>
<div id="id3" ng-show="contentVisibility">
//content here
</div>
<div id="page-content">
<div data-ng-view="">
//here will be loaded the other views
//Example: /profile, /login, /register, etc etc)
</div>
</div>
<!-- list of routes bound within the anchor tags -->
<a ng-repeat="path in [
'/login', '/register', '/forgot',
'/other-route-1', '/other-route-2', '/other-route-3']"
ng-href="#{{path}}">{{path}}<br></a>
</div>
</body>
you should use data-ng-hide to hide your contents. however, you have to set the variable at start of your specific controller in order to hide the contents and in other controllers you should set it false to show the contents.
At the beginning of your specific controller:
var $scope.contentHide = true;
At the beginning of other controllers:
var $scope.contentHide = false;
<div id="id1" data-ng-hide="contentHide">
//content here
</div>
<div id="id2" data-ng-hide="contentHide">
//content here
</div>
<div id="id3" data-ng-hide="contentHide">
//content here
</div>
I want to show following modal once user click the text. I don't know why it is not working.
<span ng-model="nonrelevantData" style="cursor: pointer;
text-decoration: underline;"><b>non-relevant data</b></span>
<script type="text/ng-template" id="bs-example-modal-sm">
<div class="modal-body">
...
</div>
<div class="modal-footer">
...
</div>
</script>
in js
$scope.$watch('nonrelevantData', function () {
$modal({
template: 'bs-example-modal-sm',
scope:$scope.$new()
});
}, true);
You can put your modal code in a scope function and call that function in ng-click
$scope.openModal = function(){
$modal({
template: 'bs-example-modal-sm',
scope:$scope.$new()
});
}
Markup
<div ng-click="openModal()">clik me to open</div>
I modified the plunkr of fancypants (from another question) to make a Simple Modal Example
To listen for clicks you don't need a watcher. The ngClick directive can be used for that.