First of all, I'm new in Angularjs and not good at English.
I tried to add <li> by using directive, and below link is completed result of my first purpose.
Add element using directive
Second is passing value from Controller to directive or from directive to Controller, known as two-way binding.
But in this step, I couldn't figure out how to use #,= and '&'.
I guessed it's because of using directive in directive.
In my original code, my modal is made of directive, so button directive seems cannot get value from Controller.
I'm sorry I cannot show you my own code because I don't know how to make many directives in fiddle.
.
.
I wanna know there are any way to add element dynamically without using directive.
No matter what you suggested like link, doc, or something, it'll be great helpful to me.
Just give a little attention please. Thank you. Have a nice day!
This may helpful.
You can use javascript as follows for achieving this.
https://jsfiddle.net/u08pa50z/
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.count = 0;
var el = document.createElement("ul");
el.style.width="600px";
el.style.height="500px";
el.style.background="green";
var parent=document.getElementById("sib");
parent.appendChild(el);
$scope.myFunc = function() {
var ch = document.createElement("li");
el.appendChild(ch);
};
}]);
You can go with ng-include
Fetches, compiles and includes an external HTML fragment.
Related
I am a beginner and I have a static page where I want to include other Html files. Like the header, footer, some buttons, and a form that I am using on more than one page.
I am not allowed to use the server-side for this exercise. So I tried using jQuery but it didn't work.
But I also would like some way to include these files without making a wrapper for them. But will be happy even with the wrapper divs if you guys help me with that.
I have not used jQuery before but I feel like a have tried every way that I found. You can see all of them below.
I am using jQuery 3.5.1.min if it is of importance.
$(".header").load("_header.html")
$(function () {
$(".header").load("_header.html");
});
function unWrapPlaceholder() {
$(this).contents().unwrap();
}
$(function () {
$("#header").load("_header.html", unWrapPlaceholder);
});
$(function(){
var includes = $('[data-include]');
jQuery.each(includes, function(){
var file = '../views/' + $(this).data('include') + '.html';
$(this).load(file);
});
});
<div data-include="_header"></div>
I don't want to use the object tag or iframes. Are there any suggestions or corrections you can give me?
I would really appreciate the help.
The file location was the problem! In the end I used the second jQuery code.
I have a template html page(say Index page) containing a header and three other pages and i want that Header on first two pages but not on third page .Using angularjs routing I am able to have that header on all three pages but cant hide that header from the third page.The pages have different controllers as well .Can anybody help me how to achieve this.
This is not a good practice, not at all! But as your question lacks of code...
You say "The pages have different controllers", so let's say you have PageOneCtrl, PageTwoCtrl and PageThreeCtrl.
If you want to show the header on the page with controllers, let's say: PageOneCtrl and PageTwoCtrl, set a $scope (remember you have to define $scope on that controller first) variable just like:
$scope.showHeader = true;
And in PageThreeCtrl (where you want to HIDE the header element) write
$scope.showHeader = false;
Then in the html you should write:
<header ng-if="showHeader">This is your header content</header>
the ng-if will do the trick, check angularjs documentation for more information: https://docs.angularjs.org/api/ng/directive/ngIf
Doesn't work? Try $rootScope instead of $scope, but watch out! If you use $rootScope then you should declare that variable on every controller.
This is not a good practice, not at all! But as your question lacks of code...
A better practice, and one of the bests in my opinion, would be to use angular-ui-router and set a data attribute to the state (route) with something like
.state('myRoute', {
templateUrl: 'views/my-route-view.html',
controller: 'MyrouteCtrl',
data: {
hideHeader: true;
}
})
, in a .run() function set something like $rootScope.$state = $state (read more about it in the ui.router docs) and then simply: <header ng-if="!$state.current.data.hideHeader">. But I believe you're not an advanced developer to do it :) So keep learning.
I'm starting to learn angularJS better, and I've noticed that AngularJS tries to make strong emphasis on separating the view from the controller and encapsulation. One example of this is people telling me DOM manipulation should go in directives. I kinda got the hang of it now, and how using link functions that inject the current element allow for great behavior functionality, but this doesn't explain a problem I always encounter.
Example:
I have a sidebar I want to open by clicking a button. There is no way to do this in button's directive link function without using a hard-coded javascript/jquery selector to grab the sidebar, something I've seen very frowned upon in angularJS (hard-coding dom selectors) since it breaks separation of concerns. I guess one way of getting around this is making each element I wish to manipulate an attribute directive and on it's link function, saving a reference it's element property into a dom-factory so that whenever a directive needs to access an element other than itself, it can call the dom-factory which returns the element, even if it knows nothing where it came from. But is this the "Angular way"?
I say this because in my current project I'm using hard-coded selectors which are already a pain to mantain because I'm constantly changing my css. There must be a better way to access multiple DOM elements. Any ideas?
There are a number of ways to approach this.
One approach, is to create a create a sidebar directive that responds to "well-defined" broadcasted messages to open/close the sidebar.
.directive("sidebar", function(){
return {
templateUrl: "sidebar.template.html",
link: function(scope, element){
scope.$root.$on("openSidebar", function(){
// whatever you do to actually show the sidebar DOM content
// e.x. element.show();
});
}
}
});
Then, a button could invoke a function in some controller to open a sidebar:
$scope.openSidebar = function(){
$scope.$root.$emit("openSidebar");
}
Another approach is to use a $sidebar service - this is somewhat similar to how $modal works in angularui-bootstrap, but could be more simplified.
Well, if you have a directive on a button and the element you need is outside the directive, you could pass the class of the element you need to toggle as an attribute
<button my-directive data-toggle-class="sidebar">open</button>
Then in your directive
App.directive('myDirective', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
angular.element('.' + attrs.toggleClass).toggleClass('active');
}
};
}
You won't always have the link element argument match up with what you need to manipulate unfortunately. There are many "angular ways" to solve this though.
You could even do something like:
<div ng-init="isOpen = false" class="sidebar" ng-class="{'active': isOpen}" ng-click="isOpen = !isOpen">
...
</div>
The best way for directive to communicate with each other is through events. It also keeps with the separation of concerns. Your button could $broadcast on the $rootScope so that all scopes hear it. You would emit and event such as sidebar.open. Then the sidebar directive would listen for that event and act upon it.
I first initialize my app with ng-app="myApp" in the body tag and this works fine for all angularized-html that is loaded on first page load.
Later on I have some code that loads angularized-html in to the DOM.
In angular 1.08 I could just run angular.bootstrap($newLoadHTML, ["myApp"]) after the load and it would work; where $newLoadHTML is the newly added HTML grabbed with jQuery.
In angular 1.2 this does no longer work:(
Error: [ng:btstrpd] App Already Bootstrapped with this Element '' http://errors.angularjs.org/1.2.0-rc.2/ng/btstrpd?p0=%3Cdiv%20ng-controller%3D%22AfterCtrl%22%3E
I am getting this error which I understand, but I don't know how to solve it.
What I need to be able to do is load angularized-html and then make angular aware of it.
Here is a plunker to illustrate it: http://plnkr.co/edit/AHMkqEO4T6LxJvjuiMeT?p=preview
I will echo what others have mentioned: this kind of thing is generally a bad idea, but I also understand that you sometimes have to work with legacy code in ways you'd prefer not to. All that said, you can turn HTML loaded from outside Angular into Angular-bound views with the $compile service. Here's how you might rewrite your current example to make it work with $compile:
// We have to set up controllers ahead of time.
myApp.controller('AfterCtrl', function($scope) {
$scope.loaded = 'Is now loaded';
});
//loads html and afterwards creates a controller
$('button').on('click', function() {
$.get('ajax.html', function(data) {
// Get the $compile service from the app's injector
var injector = $('[ng-app]').injector();
var $compile = injector.get('$compile');
// Compile the HTML into a linking function...
var linkFn = $compile(data);
// ...and link it to the scope we're interested in.
// Here we'll use the $rootScope.
var $rootScope = injector.get('$rootScope');
var elem = linkFn($rootScope);
$('.content').append(elem);
// Now that the content has been compiled, linked,
// and added to the DOM, we must trigger a digest cycle
// on the scope we used in order to update bindings.
$rootScope.$digest();
}, 'html');
});
Here is an example: http://plnkr.co/edit/mfuyRJFfA2CjIQBW4ikB?p=preview
It simplifies things a bit if you can build your functionality as a directive instead of using raw jQuery--you can inject the $compile and $rootScope services into it, or even use the local scope inside the directive. Even better if you can use dynamic binding into an <ng-include> element instead.
Your approach doesn't seem right. You are usinging jQuery and Angular together in an inappropriate way that is likely to have conflicts.
Angular's built in template support is the best way to do this either using ng-include or you can use Angular's routing and along with ng-view. The documentation is here:
http://docs.angularjs.org/api/ng.directive:ngInclude
http://docs.angularjs.org/api/ngRoute.directive:ngView
The simplest possible thing would be to just set the ng-include to the url string:
<div ng-include="'ajax.html'"></div>
If you actually need it to load dynamically when you do something then this is a more complete solution for you:
http://plnkr.co/edit/a9DVEQArS4yzirEQAK8c?p=preview
HTML:
<div ng-controller="InitCtrl">
<p>{{ started }}</p>
<button ng-click="loadTemplate()">Load</button>
<div class="content" ng-include="template"></div>
</div>
Javascript:
var myApp = angular.module('myApp', [])
.controller('InitCtrl', function($scope)
{
$scope.started = 'App is started';
$scope.loadTemplate = function() {
console.log('loading');
$scope.template = "ajax.html";
}
}).controller('AfterCtrl', function($scope)
{
$scope.loaded = 'Is now loaded';
});
Loading an AngularJS controller dynamically
The answer to this question fixed my problem. Since I need to create the controllers after the content was added to the DOM. This fix requires me too register controllers after I have declared it. If someone has an easier solution pleace chip in.
One other gotcha that leads to this Bootstrapping error is the nginclude or ngview scenarios where your dynamic html includes script references to angular js.
My html below was causing this issue when it got injected into an existing Angular page. The reference to the angular.min.js caused Angular to rebootstrap:
<div id="fuelux-wizard" class="row-fluid" data-target="#step-container">
<ul class="wizard-steps">
<li data-target="#step1">
<span class="step">1</span>
<span class="title">Submit</span>
</li>
<li data-target="#step2">
<span class="step">2</span>
<span class="title">Approve</span>
</li>
<li data-target="#step3">
<span class="step">3</span>
<span class="title">Complete</span>
</li>
</ul>
</div>
<script src="/Scripts/Angular/angular.min.js"></script>
<script type="text/javascript">
angular.element('#requestMaster').scope().styleDisplayURL();
</script>
I have an MVC grid which is rendered in by a json call on page load.
On clicking any tag of Grid I need to refresh this grid.
So I wrote this javascript.
$("#SearchGrid a").live("click", function (event) {
var link = event.currentTarget.attributes[0].childNodes[0].wholeText;
$("#SearchGrid").load(link);
return (false);
});
Its working fine with IE9 and other browsers. But I need to make it workable on IE8.
In IE8 its not loading the grid in same div, instead it redirects it to a new page, containing just the grid which is return from json call.
Try this. It uses the attribute href directly instead of your IE proprietary code
$("#SearchGrid a").live("click", function () {
var link = $(this).attr('href');
$('#SearchGrid').load(link);
return false;
}
not sure what the problem might be, but here are some tips on debugging it:
- var link = 'some-page.html'
try to see if you code actually returns any html data in IE8 - if it does then the problem lies in var link = event.currentTarget.attributes[0].childNodes[0].wholeText;
- instead of load(), try to use an $.ajax call or a json call and see waht happens.
I hope these will prove useful