I am learning angularjs.I got stucked in the tranclusion property as it confused me.How ng-transclude works? Will it replace the content inside the dom marked with ng-transclude with transcluded element(the element to be transcluded) or simply append the transcluded element to the dom marked with ng-transclude?
I referred egghead angularjs video tutorial for transclusion property
https://egghead.io/lessons/angularjs-transclusion-basics
There It was mentioned that ng-transclude simply appends the transcluded element to the dom marked with ng-transclude.But when I tried this,it is not so
Here is my html file
learning.hmtl
<html ng-app="learnangular">
<head>
<title></title>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="learnscript.js"></script>
</head>
<body>
<div ng-controller="firstcontroller">
<custom-directive><div>This is transcluded part</div></custom-directive>
</div>
</body>
</html>
and here is my script file
learnscript.js
var app=angular.module("learnangular",[]);
app.controller("firstcontroller",function($scope){
$scope.dirobject="directive object";
});
app.directive("customDirective",function(){
return {
restrict:"E",
transclude:true,
replace:false,
template:"<input type='text' ng-model='dirobject'></input>"+
"<div ng-transclude>{{dirobject}}</div>",
link:function(scope,element,attr){
}
};
});
ng-transclude replaces the content inside the dom marked with ng-transclude.why is it so?
I have understood now.The video was recorded with angular js version 1.0.x and the version I am using is the latest one. Actually,the transcluded markup completely replaces the contents of the element with the ng-transclude attribute in latest versions. In previous versions, the transcluded markup would be appended.Thanks everyone
Related
I am using the d3.js library inside an angular 1.x controller.
My d3.js library creates a click event on a div and when the div is clicked, it updates something on the angular controller's scope.
The problem is, when I change the scope ($scope.test = "a test"), the modification is not reported into the template.
However, if, inside that d3.js click event, I do a $scope.$apply (as suggested by this related topic: Angular + D3 - Get scope values to show in template from click event), the dom is updated and everything works fine.
Since the use of scope is discouraged, is there another solution that will make the changes appear in my template?
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.1/d3.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
</head>
<body>
<div ng-app="app" >
<div id="main" ng-controller="main">
test is {{test}}
<div id="graph">
hello
</div>
</div>
</div>
</body>
<script type="text/javascript">
var app = angular.module('app',[]);
app.controller('main', function($scope){
$scope.force_refresh = function(){}
d3.selectAll("#graph").on("click", function() {
$scope.test = "a test";
//////////I would like to avoid this/////////////
$scope.$apply(); ////////////////////
//////////I would like to avoid this/////////////
});
});
</script>
</html>
I have an AngularJS document where I need to set fields in various parts of the document. This includes e.x. the <title> tag. So my document Looks like the following:
<html ng-app="test" ng-controller="TestCtrl">
<head>
<title>{{test1}}</title>
</head>
<body>
<h1>{{test1}}</h1>
...
</body>
</html>
As you can see I put the ng-controller in the <html> tag because I need to use the same scope across <head> and <body>. I could also set the controller on the individual elements but since I'm doing some POST and GET queries I think it's not a good idea because then they are performed multiple times.
Is using the ng-controller tag in the <html> element a good idea (is there a negative impact)? Are there better solutions?
Ok, so I'm defining a polymer object like this:
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="my-element" attributes="content">
<template>
<div class="someclass">
{{content}}
</div>
</template>
<script>
Polymer({});
</script>
</polymer-element>
Which works fine if I instantiate it as:
<my-element content="test"></my-element>
However, I'd like to be able to pass HTML inside the element. If I do this:
<my-element content="<div>test</div>"></my-element>
The HTML is not added to the DOM, but displayed as text. Is it possible to pass HTML inside a polymer element? Or am I doing something completely wrong here?
Thanks for any help!
Here's some hackish code I made that may answer your question.
http://jsbin.com/hedutu/edit?html,output
Basically, I created an observer for an attribute that accepts DOMs in string format and then inserted that dom into a local dom node.
I’ve got an HTML fragment like <p>Hello, World!</p> and want to attach it to the container HTML page that includes
<script src="lib/kotlin.js"></script>
<script src="my-app.js"></script>
There are two package that came to my mind:
kotlin.js.dom.html.window.document.*
kotlin.browser.document.*
Which should I use and how do I access the document’s root? I’ve already tried document.getElementById("container") whereby container is the id of a DIV. But this returns null. I also tried document.appendChild(node)...
Also which of the above packages should I prefer?
I just figured out that the JS output of the compiled app needs to be below the element that is referenced inside the app.
I’ve created a demo case that illustrates this:
<!DOCTYPE html>
<meta charset="utf-8"/>
<script src="lib/kotlin.js"></script>
<p>Look inside the JavaScript Console of your browser…</p>
<div id="container"></div>
<script>
console.log("Native JavaScript");
</script>
<!-- This script tag was misplaced. It needs to be placed after all elements you want to access in your DOM -->
<script src="kotlin-javascript-hello-world.js"></script>
Another AngularJS newbie question.
I've got an index.html, controllers, and partials.
My <body> tag is in the index.html ... and I want to set the class for the body in my controller.
So I tried sticking a value in $scope.body_class and then referencing that variable in my index.html, like this:
<!doctype html>
<html lang="en" ng-app="myGreatApp">
...
<body ng-class="{body_class}"> {{body_class}} Hi!
But body_class doesn't return a value.
How do I get body_class to return a value?
For starters, the controller has to be defined on the element or any parent element for it to be able to interact with the directives (or you will have to inject the $rootScope and use it instead) and, the ng-class directive accepts a hash, so
<body ng-controller="YourController" ng-class="{body_class: <expression>}"> {{body_class}} Hi!
and if <expression> is thruthy, it will get a html class that corresponds to the key in the hash.
<body ng-controller="YourController" ng-class="{body_class: true}" class="body_class"> whatever value $scope.body_class has Hi!
If you dont need to declare the class name in the markup, the ng-class directive also accepts a direct binding, so you can instead:
<body ng-controller="YourController" ng-class="body_class"> {{body_class}} Hi!
ng-class documentation
Try this:
Controller
function SampleCtrl($scope){
$scope.MyClass = 'Hello'
}
HTML
<body data-ng-app="" data-ng-controller='SampleCtrl'>
<div data-ng-class="MyClass">Hello World
</div>
</body>
Sample JsFiddle