View contents of Angular template on page - javascript

I have been looking for a while now and cannot seem to find the right answer to this question and I was hoping you all could help.
What I am trying to do is pass in a URL, through JSON, to my angular directive so I can display the contents/code in a template on the screen.
I am trying to create a directive cheat sheet, similar in design to that of Bootstrap's documentation page: http://getbootstrap.com/components/#btn-dropdowns
I have tried using ng-bind-html, but that only displays the URL I pass in.
My question is, can I pass in a template URL through JSON to a directive and have the contents/code of that file be displayed on the screen? Or do I need to copy all the code into the JSON file directly pass a string representation of the code to the directive?
EDIT
Here is a sample of the JSON file I am building:
{"id":"number-picker",
"title":"Number Picker",
"description":"An input box used to communicate a numeric value from the client to the server",
"code":"/js/directives/templates/number-picker.html"}
And here is a section of the directive I'm building:
<h2>{{directive.title}}</h2>
<div class="row">
<div class="col-md-2">
<span class="bold">Description:</span>
</div>
<div class="col-md-10">
<span ng-bind-html="directive.description"></span></p>
</div>
</div>
<p><span class="bold">Code:</span>
<div class="code">
<div ng-bind-html="directive.code"></div>
</div>
</p>

After a bunch of trial and error and many thanks to everyone that commented I figured out a solution.
This is the js code:
myApp.directive('directiveDetail', function($http){
return {
restrict: 'E',
templateUrl: 'js/directives/templates/directive-template.html',
link: function(scope, element, attrs) {
if (scope.directive.code) {
$http.get(scope.directive.code).then(function (response) {
scope.displaycode = response.data;
});
}
}
}
});
I needed to access the scope parameter to gain access to the URL data. I also needed to add the if statement because if I don't pass in a valid URL then the the text displayed is the entire code for the DOM.

Related

angularjs click event, after appending content [duplicate]

I am working with angularjs 1.2.0-rc.3. I'd like to include html code into a template dynamically. For that I use in the controller :
html = "<div>hello</div>";
$scope.unicTabContent = $sce.trustAsHtml(html);
In the template I got :
<div id="unicTab" ng-bind-html="unicTabContent"></div>
It works fine for regular html code. But when I try to put angular template it is not interpreted, it is just included in the page. For example I'd like to include :
<div ng-controller="formCtrl">
<div ng-repeat="item in content" ng-init="init()">
</div>
</div>
Thanks a lot
This solution doesn't use hardcoded templates, and you can compile Angular expressions embedded within an API response.
Step 1.
Install this directive: https://github.com/incuna/angular-bind-html-compile
Step 2. Include the directive in the module.
angular.module("app", ["angular-bind-html-compile"])
Step 3. Use the directive in the template:
<div bind-html-compile="letterTemplate.content"></div>
Result:
Controller Object
$scope.letter = { user: { name: "John"}}
JSON Response
{ "letterTemplate":[
{ content: "<span>Dear {{letter.user.name}},</span>" }
]}
HTML Output =
<div bind-html-compile="letterTemplate.content">
<span>Dear John,</span>
</div>
For reference sake, here's the relevant directive:
(function () {
'use strict';
var module = angular.module('angular-bind-html-compile', []);
module.directive('bindHtmlCompile', ['$compile', function ($compile) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
scope.$watch(function () {
return scope.$eval(attrs.bindHtmlCompile);
}, function (value) {
element.html(value);
$compile(element.contents())(scope);
});
}
};
}]);
}());
This is what I've made, no idea if it's the angular wayTM, but it works and is super simple;
.directive('dynamic', function($compile) {
return {
restrict: 'A',
replace: true,
link: function (scope, element, attrs) {
scope.$watch(attrs.dynamic, function(html) {
$compile(element.html(html).contents())(scope);
});
}
};
});
So;
<div id="unicTab" dynamic="unicTabContent"></div>
Edit: I found the angular way, and it's super simple.
$templateCache.put('unicTabContent', $sce.trustAsHtml(html));
<div id="unicTab" ng-include="'unicTabContent'"></div>
Don't need to make your own directives or anything.
But it's a bind-once sort of deal, it wont see changes made to your html like the custom directive does.
As Vinod Louis says in his comment, the best way to do that was to use templates. I had to define a template outside of the regular code, for example I added that code inside of my index.html :
<script type="text/ng-template" id="unic_tab_template.html">
<div ng-switch on="page">
<div ng-switch-when="home"><p>{{home}}</p></div>
<div ng-switch-when="form">
<div ng-controller="formCtrl">
<div ng-repeat="item in content">{{item.name}}:{{item.value}}</div>
</div>
</div>
<div ng-switch-default>an error accured</div>
</div>
</script>
This template is conditional, so depending on the value of $scope.page, it switches between the 3 templates (the third being an error handler). To use it I had :
<div id="unicTab" ng-controller="unicTabCtrl">
<div ng-include="'unic_tab_template.html'"></div>
</div>
That way my page changes depending on the $scope inside of my unicTabCtrl controller.
To conclude the idea of inserting angularsjs template seams to be difficult to realize ($compile seams to be the solution, but I wasn't able to make it work). But instead you may use conditional templating.
I was trying to do the same thing and came across this module.
http://ngmodules.org/modules/ng-html-compile
I just included it and then I was able to use "ng-html-compile" instead of "ng-bind-html"
My solution to similar problem in my current app without using template (not elegant, but working):
directive('ngBindHtmlCompile', ['$compile', function ($compile) {
return {
restrict: 'A',
compile: function compile(tElement, tAttributes, transcludeFn) {
return function postLink(scope, element, attributes) {
scope.$watch(function() {
return scope.$eval(attributes.ngBindHtml);
}, function(newValue, oldValue) {
$compile(element.children())(scope);
});
};
}
};
}]);
It requires ngBindHtml on the same element and compiles the element content after it changes with ngBindHtml.
<div id="unicTab" ng-bind-html="unicTabContent" ng-bind-html-compile></div>
ng-html-compile looks similar but at first glance it won't be recalculated when the template content is changing. But I haven't tried it.
One way is use a directive for purpose of inserting custom templates that include angular expresssions
<div id="unicTab" unic-tab-content></div>
app.directive("unicTabContent",function(){
return {
restrict:"A",
template:'{{unicTabContent}}'
}
})
The code below is much simpler using Angular's built-in $interpolate and $sce objects. First inject the $interpolate and $sce Angular objects into your directive as you do anything custom you need in your directive.
amqApp.directive('myDir', ['$interpolate', '$sce', function ($interpolate,$sce ) {...}
Then create all your scoped variables found in your imported html expressions...
$scope.custom = 'Hello World';
Next use $interpolate to process your custom HTML and its expressions...then make sure you use the $sce object to trust it as HTML before binding...
var html = $interpolate('<b>{{custom}}</b>')($scope);
$scope.data = $sce.trustAsHtml(html);
Finally, in your view, just make sure use an element with the "ng-bind" or "ng-bind-html" on it in your view display. I found the $sce piece wont display the HTML as HTML (sees it as text) if you don't bind it in your html template like this...
<span ng-bind-html="data"></span>
You should see in bold...
Hello World
I used this trick to import in text/HTML with custom angular {{expressions}} from a web.config.
A lot simplified solution of #clement-roblot based on built-in templates.
Controller:
app.controller('TestCtrl', [
'$scope',
'$templateCache',
function ($scope, $templateCache) {
$templateCache.put('test.html', '2 + 2 = {{ 2 + 2 }}');
}
]);
View:
<div ng-include="'test.html'"></div>

AngularJS directive variable interpreted as text before interpolated as variable

I have a fairly simple ng-repeat that iterates an AngularJS directive to display images from an array of objects, where each JSON object has a img attribute with a URL of the image. Everything works fine except in the network tools I can see that the browser is trying to load an image source URL as {{ data.img }} before being interpolated into it's actual value, it's driving me crazy trying to figure out why this is happening.
Here are the relevant pieces of my code:
index.html
<div ng-repeat="data in obj">
<feed-item></feed-item>
</div>
feedItem.html (directive)
<div class="item">
<img src="{{ data.img }}" />
</div>
Angular directive
app.directive("feedItem", function() {
return {
restrict: 'E',
templateUrl: 'assets/directives/feedItem.html',
replace: true
};
});
This results in the images rendering fine, but as mentioned the following shows up in the network tools:
All of the 2 images from the array of JSON objects are loaded fine as you can see, but I have the extra request the browser is trying to make, and the "initiator" column just says "other" which is not very helpful. Any idea why this request is being sent?
As matthewdaniel said, ng-src might solve your problem. It stops the browser from trying to load that source of the image before angular can get going, you use it just like the 'src' attribute on a normal image.

How to catch an event after all content is loaded when all controllers are initialized inside an ng-repeat in Angularjs?

<!-- Begin page content part of a pageCtrl -->
<div class="container" ng-init="pageInit();">
<div class="template {{block.type}}" ng-repeat="block in pageBlocks" my-repeat-directive>
<div ng-controller="templateCtrl" ng-include src="'partials/components/' + block.type + '.html'" ng-init="initTemplate(block);"></div>
</div>
</div>
Inside my ng-repeat I initialize dynamically some small templates with my templateCtrl passing some data from my pageCtrl scope.
My goal is to be able to execute some javascript after all the content of my templates is loaded and compiled by Angularjs.
But at the moment I cannot find an "after all is compiled" event to manage some simple callback operations.
I tried directives & on-last-repeat operations on the ng-repeat, i tried scope.$watch, $timeout, $scope.$on('$viewContentLoaded')... but any working behaviours.
any idea, suggestions? thanks in advance
after some other attmepts i end up in this solution, that seems to work really fine.
this in the html
<div ng-controller="templateCtrl" ng-include src="'partials/components/' + block.type + '.html'" ng-init="initTemplate(block);" template-directive></div>
and this in javascript
app.directive('templateDirective', function($timeout){
return {
restrict: "EA",
compile: function(element, attributes){
return {
post: function(scope, element, attributes, controller, transcludeFn){
if(scope.$last){
$timeout(function(){
//operations in the callback
}, 250);
}
}
};
}
};
});
do the experts agree?

How to dynamically nest directives in AngularJS

New to Angular and need some assistance.
I have a block of HTML content that will be coming from a database that will contain a group of widgets. These are simple widgets that will essentially render out various elements, but for the purposes of this question we'll assume they're all basic HTML inside.
Those widgets are included in an unpredictable way, so my first thought was to use directives to render the HTML. So, we'd have something like:
<div widget data="This is the content."></div>
So I've got a directive that will place the value of data into the div. Easy enough!
Now, how would I go about nesting those widgets? So, how would I get something like:
<div widget data="Welcome! ">
<div widget data="This is some inside content."></div>
</div>
to render out:
Welcome! This is some inside content.
... because the issue I'm noticing is that if I place anything inside the directive HTML, it essentially gets ignored since it gets replaced with its own result (thus only echoing out Welcome!).
I realize I may be going the wrong direction on this in the first place, so any insight would be greatly appreciated. Thanks so much!
This is where you need to use the transclusion feature of the directive combined with ng-transclude directive.
Directive that marks the insertion point for the transcluded DOM of the nearest parent directive that uses transclusion.
Any existing content of the element that this directive is placed on will be removed before the transcluded content is inserted.
A very basic version of transclusion of content based on your example might look something like this:
.directive('widget', function() {
return {
transclude: true,//Set transclusion
template: '{{text}} <section ng-transclude></section>', <!-- set where you need to present the transcluded content -->
scope: {
text: "#"
}
}
});
Demo
angular.module('app', []).directive('widget', function() {
return {
transclude: true,
template: '{{text}} <section ng-transclude></section>',
scope: {
text: "#"
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<span widget data-text="Welcome! ">
<div widget data-text="This is some inside content.">
<span widget data-text="This is some inside inside content."></span>
</div>
</span>
</div>

Implementing a page load performance directive in AngularJS

I am very new with AngularJS so I need quite some pointing in the right direction.
The task is to create some kind of widget that displays how much time it takes from any user action until the requested page finishes rendering.
We are going to be using AngularJS at the presentation layer and the back-end will be Microsoft's Web API.
So I figured I could use the browser's Navigation Timing API and wrap it on an AngularJS directive so I tried this:
angular.module('performanceDirective', [])
.directive('pagePerformance', function(){
return {
restrict: 'AE',
replace: 'true',
template: '<div><label id="loadTimeEllapsed">Total Load Time:{{totalLoadTime}}</label></div>',
scope: {},
link: function (scope, elem, attrs) {
scope.$watch('window.performance.timing', function (newValue, oldValue) {
var timing = window.performance.timing;
var userTime = timing.loadEventEnd - timing.navigationStart;
scope.totalLoadTime = userTime;
});
}
};
});
But it seems that there is something missing because even though I am doing actions that call the back-end the number that gets displayed after the home page loads is never updated.
Is this something that actually would work, provided we fix whatever is failing, or is this a dead end and we need to find another option?
UPDATE
The use of the directive has nothing to it, basically it is just the element thrown on a page:
<body ng-app="myApp">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li>Some Action</li>
</ul>
</div>
</div>
<div class="row">
<div class="span4"><data-page-performance /></div> <!-- The Directive -->
<div class="span10" ng-view></div>
</div>
</body>
Apparently this directive only works if I refresh the page after I have already navigated to it but if I click on an element that will trigger an action on the AngularJS controller the performance number is completely unaffected.

Categories

Resources