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/
Related
My question is best explained when I straight go to the code.
HTML part:
<div class="panel panel-default post" ng-repeat="post in posts">
<div class="panel-body">
<div class="row">
<div class="col-sm-2">
<a class="post-avatar thumbnail" href="/profile#/{[ post.profileID ]}">
<div class="text-center">{[ user.fullname ]}</div>
</a>
</div>
</div>
</div>
When I click on the /profile#/{[ post.profileID ]} link - it takes me to the profile page. All good here.
However, I am using ngView so I have separated it like this:
<div class="col-md-3">
<div>Some HTML stuff</div>
</div>
<div class="col-md-6">
<div ng-view></div>
</div>
<div class="col-md-3">
<div>Some HTML stuff</div>
</div>
My ngView makes use of the /profile#/{[ post.profileID ]} param and I use it to display whatever I have to display.
The problem:
I can get the profileID param in my angular controller but once I get it, how will I be able to pass it onto other controllers?
My controller looks like the below:
var profileApp = angular.module('profileApp', ['ngRoute']);
profileApp.config(function($routeProvider) {
$routeProvider
.when('/:id', {
templateUrl : 'partial/profile/feed.html',
controller : 'mainController'
})
.when('/posts:id', {
templateUrl : 'partial/profile/posts.html',
controller : 'postsController'
});
});
profileApp.controller('mainController', ['$scope', '$http', '$routeParams', function($scope, $routeParams){
console.log($routeParams.id);
}]);
profileApp.controller('postsController', ['$scope', '$routeParams', function($scope, $routeParams){
console.log($routeParams.id);
}]);
As you can see, I get get the param passed from the HTML link and use it in the mainController but how will I get the param to be a link in the col-md-3 (just like the original /profile#/{[ post.profileID ]})?
Hope this makes sense. It's has been driving me nuts!
Thanks
Why don't you just edit your partial HTML pages and put the columns in it.
For partial/profile/feed.html :
<div>
<div class="col-md-6">
<div>feed stuff</div>
</div>
<div class="col-md-3">
</div>
</div>
And partial/profile/posts.html could be :
<div>
<div class="col-md-6">
</div>
<div class="col-md-3">
<div>posts stuff</div>
</div>
</div>
So I did some research into this and I just ended up using services.
See below for the answer:
profileApp.service('globalParams', function() {
var profileID = '';
return {
getProfileID: function() {
return profileID;
},
setProfileID: function(value) {
profileID = value;
}
};
});
You then pass the service into the dependencies in the controllers, like below:
profileApp.controller('mainController', ['$scope', 'globalParams', function($scope, globalParams){
//some code
};
And you can call the functions for getting and setting the variables.
I have my index.html page in which an ng-view is implemented. The same applies to the sidebar, which also linkes to 3 pages (main.html, product.html and customer.html).
I need to change the class of sidebar.html for example when I'm in the customer.html page.
I tried to do it from the customerController but it had no result. As I understand it, because the sidebar.html is controlled by MyController
Can anyone guide me?
Thank you
Here are the relevant parts of the code:
index.html
<html ng-app="appDataBoard">
<body ng-controller="MyController" >
<!-- SIDEBAR-->
<div ng-include="'./template/sidebar.html'" ></div>
<!-- BEGIN CONTENT -->
<div class="page-content-wrapper">
<div class="col-md-12 column sortable">
<div ng-view></div>
</div>
</div>
</body>
</html>
sidebar.html
<div class="page-sidebar-wrapper">
<ul >
<li class="nav-item start open">
</li>
<li class="nav-item ">
</li>
<li ng-class="nav-item">
</li>
</ul>
</div>
<!-- END SIDEBAR -->
routing.js
var dbApp = angular.module('appDataBoard', ['ngRoute','ngMaterial', 'ngMessages', 'material.svgAssetsCache']);
// 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'
})
// route for the contact page
.when('/customer', {
templateUrl : 'template/customer.html',
controller : 'customerController'
});
});
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'
});
});
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 need to add 2 o 3 slider to my page with angularjs by reading some json.
my code should be something like that:
<div class="wrapper">
<div id="navigation">...</div>
<div class="slider">
<ul class="painting">
<li>
<img src="img/01.jpg" height="240" width="237"/>
<h1>title</h1>
<h2>description</h2>
</li>
<li>...</li>
<li>...</li>
</ul>
</div>
<div class="slider">
<ul class="illustration">
<li>
<img src="img/01.jpg" height="240" width="237"/>
<h1>title</h1>
<h2>description</h2>
</li>
<li>...</li>
<li>...</li>
</ul>
</div>
<div class="footer"></div>
</div>
i code 2 template: one for the list of slide and one for the detail. I add ng-view to the first div.slider and when i click on the image, the details template is open inside the div.slider ..instead i need to clean all and print it inside the body.
By now, this is my index:
<div id="wrapper">
<div id="navigation">...</div>
<div id="portfolio" class="sliderCont first">
<div ng-view class="slider"></div>
</div>
<div class="sliderCont">
<div class="slider"></div>
</div>
<div class="sliderCont">
<div class="slider"></div>
</div>
<div class="sliderCont last">
<div class="slider"></div>
</div>
</div>
this is my list.html template:
<ul class="works">
<li ng-repeat="work in works">
<img src="{{work.thumbUrl}}" height="240" width="237"/>
<h1>{{work.testo1}}</h1>
<h2>{{work.testo2}}</h2>
</li>
</ul>
my controller.js:
function sliderListCtrl($scope, $http) {
$http.get('json/slider1.json').success(function(data) {
$scope.works = data;
});
}
function sliderDetailCtrl($scope, $routeParams, $http) {
$http.get('json/' + $routeParams.workId + '.json').success(function(data) {
$scope.work = data;
});
}
and in the end, my app.js:
angular.module('workList', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/works', {templateUrl: 'partials/work-list.html', controller: sliderListCtrl}).
when('/works/:workId', {templateUrl: 'partials/work-detail.html', controller: sliderDetailCtrl}).
otherwise({redirectTo: '/works'});
}]);
does anyone have any idea?
I am not sure if I understand your question, but reading the title, 2-3 ng-view, that is not possible.
You can only have one ng-view per application, which normally contains the application itself.
If you want to add partial templates, you can use ng-include which allow you to add all the templates you want inside others.
On the other hand, there is a ui-router project which have a different way to add templates to your views.