angular-ui view nested in a directive does not load view content - javascript

if I nest ui-view inside a directive with transclude=true, the view content does not load. It works fine without the intervening directive.
so with a page containing:
<body>
<div ng-controller="MainController">
<div ui-view="sampleView"></div>
</div>
</body>
the sampleView content appears.
But if i put
<body>
<div ng-controller="MainController">
<div sample-directive>
<div ui-view="sampleView"></div>
</div>
</div>
</body>
then the view content doesn't appear.
I have created a simple html page to demonstrate the problem, see below.
As far as I can see, the angular compiling process does correctly call updateView in the ui-view directive in angular-ui, and that does build the view content and insert it in the dom under the sample-directive node, but that doesn't seem to be the actual visible sample-directive node, but a clone of it. i'm guessing it has to do with the order of compilation and therefore I need to do something clever in the directive, but i can't find anything in the angular api help that covers this point.
i've tried adding a post-link function and calling $transclude from there but it makes no difference.
can anyone advise what i need to add to the directive so this will work.
thanks
UPDATE
New info from further investigation:
It seems the cause is this (not at this point a solution, but I can see why it happens).
In angular's function applyDirectivesToNode (angular.js line 5919), if a directive specifies transclude=true, then the original directive node is cloned to make the template node. ie the template is not the original node that's visible in the dom. Now, when the compile function of ui-view in angular-ui-router.js line 2204 is called, it grabs a copy of the parent of the ui-view node, storing it in parentEl. But, and here's where the problem occurs - this parent is the parent in the dom of the ui-view node. what it's most certainly not is the instance of the parent that actually ends up in the dom after linking. Later when the ui-view updates for the initial route change, it builds the view content and inserts it under parentEl (angular-ui-router.js line 2273), but as we saw earlier this isn't in the visible dom after linking. it's the source html node and not the clone created by compiling and linking the directive in which the ui-view is nested.
I think this may be a bug in ui-view.
There may be a way to add a workaround to the directive, to get the post-link view instance and put it into the directive. If I figure it out I'll add an answer.
html to demonstrate the issue as follows:
<!DOCTYPE html>
<html lang="en" ng-app="viewInDirectiveApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>View inside a directive</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script src="modules/angular-ui-router.js"></script>
<script>
var viewInDirectiveApp = angular.module('viewInDirectiveApp', ['ui.router']);
viewInDirectiveApp.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('sampleState', {
url: '/sampleState',
views: {
sampleView: {
template: 'This is the view content',
controller: function ($scope) {
}
}
}
});
$urlRouterProvider.otherwise("/sampleState");
})
.controller('MainController', ['$scope',
function ($scope) {
}])
.directive('sampleDirective', function () {
return {
template: 'Start directive content <div ng-transclude></div> End directive content',
transclude: true
};
});
</script>
</head>
<body>
<div ng-controller="MainController">
Before sampleDirective
<div sample-directive>
Before sampleView
<div ui-view="sampleView"></div>
After sampleView
</div>
After sampleDirective
</div>
</body>
</html>

Confirmed bug in ui-router 0.2.8: https://github.com/angular-ui/ui-router/issues/774
Fixed in 0.2.10: https://github.com/angular-ui/ui-router/pull/858

Plunkers are much appreciated: http://plnkr.co/edit/TZ8hvkSbCIa0dTj0NkcG?p=preview - Seems to work in Angular-routing: http://dotjem.github.io/angular-routing/

Related

After changing pages on small site using ngroute, my jquery toggle doesn't work

Full code:
Plunkr Link
I have been working on a basic AngularJS website and I recently ran into an issue which prevents me from using a jquery toggle after I navigate to a different page. I believe my issue is with the routing since the toggle works if I keep it on my index.html file as well as when I separate page one and put it into codepen. I am unable to find anything too similar around the web that could help me, which is possibly because I have been asking the question incorrectly, however at this point I think I need to ask for help. This may be just a fundamental lack of understanding of ng-route or angular controllers on my end so please bear with me if that's the case/
$(document).ready(function() {
$("#SmMagCld").click(function() {
$("#SMC").toggle(350);
});
});
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<p>PLS JUST LET ME ROUTE TO MY OTHER PAGES AND STILL MAINTAIN FUNCTIONALITY MR ANGULAR... :(</p>
<br>
:(
Page1
Page2
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "main.html"
})
.when("/page1", {
templateUrl: "page1.html"
})
.when("/page2", {
templateUrl: "page2.html"
});
});
app.controller('mainCtrl', function($scope) {
$scope.message = 'welcome hooooooooome';
});
app.controller('page1Ctrl', function($scope) {
$scope.message = 'who is on first';
});
app.controller('page1Ctrl', function($scope) {
$scope.message = 'what is on second';
});
</script>
</body>
</html>
I would also like to say that no errors appear on my localhost when I put it up nor on the plunkr when I run it.
It isn't only the toggle that stops working after routing to a different page but I believe if I can figure out why that isn't working I can apply it to the other similar issues. I created the first site I linked to try and eliminate other possible variables that are causing the issue but if you want to see some other instances of my routes not working, here is another hhttps://plnkr.co/edit/98uEPuLJl8cKGjbrTGsn?p=preview that probably is littered with other mistakes. (not enough reputation to post more than two links so I added an extra h in front of the URL)
I'm fairly new to JavaScript/html, not to mention angularJS, as such any advice about cleaning or improving the code would be much appreciated. Please let me know if any additional information is needed or if I didn't explain my problem clearly.
If it's an angular app your views should be partial (It should not have html or body tags)
Load jquery before angular.
For events you can have ng-click, ng-mouseover, ng-keypress, etc Angularjs html events. And you can write functions on them which has dom manipulation using jquery, inside that page's controller.
onclick doesn't work on images with jquery in document.ready because this event checks only dom tree ready not complete multimedia load.
You can have the onclick binding either by angularjs directives or by binding it inside controller (where it executes on complete load of template).
Here's fixed plunker link : https://plnkr.co/edit/nZJtK1z4FkSIdiQS8Rk8?p=preview

Angularjs: How To Call Controller Function After Routing

I'm learning angularjs and there is one aspect of it that I'm struggling to understand.
My desired/expected behavior of the code below is:
User clicks the Paris link (anchor tag)
The routeProvider intercepts the request, loads the paris.html page into the ng-view.
The 'getCity' function in the controller gets the data and sets the scope variables, which are displayed in the london.html expressions.
However, I can't figure out how to config angularjs to use the 'getCity' function when the html page is loaded into the ng-view. The closest I can get is calling the 'getCity' function from within the CityController itself, bit this seems to have the undesired effect of calling the function when the whole app (index.html) is loaded instead of only when the link is clicked. The controller will have a number of different functions.
I also know you can use ng-click to call a controller's function, but I'm unsure how this would work with loading a html page into an ng-view through the route provider.
Any help would be appreciated. Please see code below from a small app built for learning purposes:
index.html
<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.js"></script>
</head>
<body>
<ol>
<li>Paris</li>
</ol>
<div class="content-wrapper" ng-controller="CityController">
<div ng-view></div>
</div>
<script src="resources/js/app.js"></script>
<script src="resources/js/CityController.js"></script>
</body>
</html>
app.js
var app = angular.module("mainApp", [ 'ngRoute' ]);
app.config([ '$routeProvider', function($routeProvider) {
$routeProvider.
when('/cities/paris', {
templateUrl : 'resources/paris.html',
controller : 'CityController'
}).
otherwise({
redirectTo : ''
});
} ]);
CityController.js
app.controller('CityController', function($scope, $http) {
$scope.getCity = function() {
$http.get('city')
.success(function(response) {
$scope.name = response.name;
$scope.country = response.country;
}).error(function() {
//Output error to console
});
};
//$scope.getCity();
});
I don't want to call getCity here because it means the http get request to
the 'city' endpoint is called when index.html is loaded
paris.html
This is Paris.
<br><br><br>
Name: {{name}}<br>
Country: {{country}}
<br><br><br>
I think what you are looking for is the router resolve option.
A resolve contains one or more promises that must resolve successfully before the route will change. This means you can wait for data to become available before showing a view, and simplify the initialization of the model inside a controller because the initial data is given to the controller instead of the controller needing to go out and fetch the data.
Check the explanation and usage here
You can call getCity() from paris.html using ,ng-init=getCity() ,ng-init will call your function as soon as paris.html is loaded into your ng-view .
For Eg.
This is Paris.
<br><br><br>
<div ng-init=getCity() >
Name: {{name}}<br>
Country: {{country}}
</div>
<br><br><br>

angularJS $http.get communicating with API

I am new to AngularJS and I am trying to understand it by studying sample codes.
Here I have one about $http.get, from the following link:
http://www.w3schools.com/angular/tryit.asp?filename=try_ng_customers_json
I just replaced url with one of my own but it did not work, and I am really confused, please help, thanks!
=========================
second edit: thanks to the answers, double ng-app is a mistake, but it is not the main reason for this problem. I think it has something to do with cross-site blocking, but I have turn it off on my API (I use codeigniter REST API and I set $config['csrf_protection'] = FALSE; ), I am not sure how to configure it.
<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="customersCtrl">
<ul>
{{names}}
</ul>
</div>
<div ng-controller="myCtrl">
<ul>
{{names}}
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.w3schools.com/website/Customers_JSON.php")
.success(function (response) {$scope.names = response;});
});
app.controller('myCtrl', function($scope, $http) {
$http.get("https://manage.pineconetassel.com/index.php/api/v1/colors2.php")
.success(function (response) {$scope.names = response;});
});
</script>
</body>
</html>
The problem is that you have two "myApp" declarations.
From AngularJS documentation:
Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application.
So, you should move the ng-app="myApp" to the body element.
However, once you've done that you probably still won't see any result because you are cross-site scripting and browsers will (by default) block the second request.
Two ng-app directive on single page will execute the first one, 2nd one will get ignored.
Remove ng-app="myApp" from both div of your html and use angular.bootstrap to bootstrap angular app on html page using below code.
Code
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});

Require directive on template

I am using RequireJS in my Angular app. I would like to require my pill where it is actualy used.
pill.js
define([], function() {
angular.module('app').directive('pill', function() {
return function(a,b,c) {
b.html("A pill");
};
});
});
incl.html
<div load-script="require(['pill']);"></div>
<div pill>test</div>
main.html
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
<script src="http://requirejs.org/docs/release/2.1.10/comments/require.js"></script>
</head>
<body>
<script>
var app = angular.module("app", [])
app.directive('loadScript', function() {
return {
link: function(scope, element, attrs) {
(new Function(attrs.loadScript))();
}
};
}
);
</script>
<div ng-include="'incl.html'"></div>
</body>
</html>
This short example should declare a pill directive that just transform text from test to A pill inside incl.html file. However, it doesn't work. I guess it is because the pill directive is registered after incl.html is compiled.
I want avoid declaring directives somwhere globaly for example inside main.html because it is not used there. Is this requirement achievable in elegant way?
The best way to load directive on demand is to create it using $compileProvider which you will need to cache during your app.config phase. Also, instead of using ng-include, I would suggest you load the directive you need when partial view that uses it loads.
To do that, it is actually quite complicated. I created following library that should help get you started:
http://marcoslin.github.io/angularAMD/
angularAMD would make it easier for your create a independent file that allow you to configure RequireJS dependency to load the directive only on the partials that needs it.

angular load template from url and compile inside div

As I'm new to Angular JS I was wondering how could I load an external template and compile it with some data into the targeted div.
For instance I have this template :
<script type="text/ng-template">
<img src="{{Thumb}}" />
<script>
The div that is supposed to contain the template :
<div data-ng-controller=" ... "></div>
The template is located somewhere in a folder /templates/test.php. Is there a build in way of doing the template loading like a directive would do and compile it against some data that would replace the key {{Thumb}} ( and many others of course ) ?
EDIT : What if I use $routes and load a template when I'm in the root of the website ? How could that be achieved ?
Using $templateRequest, you can load a template by it’s URL without having to embed it into your HTML page. If the template is already loaded, it will be taken from the cache.
app.controller('testCtrl', function($scope, $templateRequest, $sce, $compile){
// Make sure that no bad URLs are fetched. If you have a static string like in this
// example, you might as well omit the $sce call.
var templateUrl = $sce.getTrustedResourceUrl('nameOfTemplate.html');
$templateRequest(templateUrl).then(function(template) {
// template is the HTML template as a string
// Let's put it into an HTML element and parse any directives and expressions
// in the code. (Note: This is just an example, modifying the DOM from within
// a controller is considered bad style.)
$compile($("#my-element").html(template).contents())($scope);
}, function() {
// An error has occurred here
});
});
Be aware that this is the manual way to do it, and whereas in most cases the preferable way would be to define a directive that fetches the template using the templateUrl property.
in Angular there's 2 ways of using template (at least 2 ways that i know about):
the first using an inline template (in the same file) with this syntax:
<script type="text/ng-template">
<img ng-src="{{thumb}}">
</script>
the second one (what you want) is external template:
<img ng-src="{{thumb}}">
so what you need to do is to remove the script part from your template and then use the ng-include in the wanted div like this:
<div ng-include="'templates/test.php'"></div>
need to have double quotes and single quotes to work.
Hope this helps.
Let's say I have this index.html:
<!doctype html> <html lang="en" ng-app="myApp">
<body>
<script src="tpl/ng.menu.tpl" type="text/ng-template"></script>
<mainmenu></mainmenu>
<script src="lib/angular/angular.js"></script>
<script src="js/directives.js"></script>
</body>
</html>
And I have a template file "tpl/ng.menu.tpl" with only these 4 lines:
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
My directives mapping "js/directives.js":
angular.module('myApp',['myApp.directives']);
var myModule = angular.module('myApp.directives', []);
myModule.directive('mainmenu', function() {
return {
restrict:'E',
replace:true,
templateUrl:'tpl/ng.menu.tpl'
}
});

Categories

Resources