I am written this code for angularjs custom directive, but not geeting the output. Please help me.strong text
<html>
<head>
<title>Directives</title>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="angular-1.7.6\angular.js"></script>
<script src="angular-1.7.6\angular.min.js"></script>
<script>
var app=angular.module("arrayApp", [])
app.controller("arrayCtrl", function ($scope) {
$scope.colors = ["RED","GREEN","BLUE","YELLOW" ];
});
app.directive('mycolor', function() {
return {
restrict: 'E',
transclude: 'true',
template: '<span ng-transclude></span>',
link: function(scope, element, attr){
element.append("<strong>"+attr.title+"</strong>");
}
};
});
</script>
</head>
<body ng-app="arrayApp">
<div ng-controller="arrayCtrl">
<div ng-repeat="c in colors">
<my-c title="{{c}}">
BASIC COLOR:
</my-c>
</div>
</div>
</body>
</html>
Iam not getting where I am wrong.
I am getting the output as
Output
The code is as below :
<html>
<head>
<title>Directives</title>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script>
var app=angular.module("arrayApp", [])
app.controller("arrayCtrl", function ($scope) {
$scope.colors = ["RED","GREEN","BLUE","YELLOW" ];
});
app.directive('mycolor', function() {
return {
restrict: 'E',
transclude: 'true',
template: '<span ng-transclude></span>',
link: function(scope, element, attr){
element.append("<strong>"+attr.title+"</strong>");
}
};
});
</script>
</head>
<body ng-app="arrayApp">
<div ng-controller="arrayCtrl">
<div ng-repeat="c in colors">
<mycolor title="{{c}}">
BASIC COLOR:
</mycolor>
</div>
</div>
</body>
</html>
Firstly change the name of the directive into camelCase, it's a good convention for naming directives. So your directive name should be myColor.
Then use the directive like - my-color. Below is the whole code -
<html>
<head>
<title>Directives</title>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script>
var app=angular.module("arrayApp", [])
app.controller("arrayCtrl", function ($scope) {
$scope.colors = ["RED","GREEN","BLUE","YELLOW" ];
});
app.directive('myColor', function() {
return {
restrict: 'E',
transclude: 'true',
template: '<span ng-transclude></span>',
link: function(scope, element, attr){
element.append("<strong>"+attr.title+"</strong>");
}
};
});
</script>
</head>
<body ng-app="arrayApp">
<div ng-controller="arrayCtrl">
<div ng-repeat="c in colors">
<my-color title="{{c}}">
BASIC COLOR:
</my-color>
</div>
</div>
</body>
</html>
This is the output -
Related
I need to pass a variable from the server side to AngularJS.
I have the following HTML on the server side
<div ng-app="tablesApp" ng-controller="tablesCtrl" ng-init="lang='#lang';...go();" ...>
<st-date-range ?lang="#lang"? ...> </st-date-range>
...
</div>
I should put somewhere in the HTML code (actually in ng-init, but if there are other options I'm OK with that) my server side #lang value, then Angular should use that value...
I use a directive and I would like to pass the #lang(a server side ASP.NET razor variable) param to angular in order to use it in the template path:
app.directive('stDateRange', [function () {
return {
restrict: 'E',
require: '^stTable',
templateUrl: '/templates/stDateRange.en.html',
scope: false,
link: function (scope, element, attr, ctrl) {
var tableState = ctrl.tableState();
scope.$watchGroup(["minDate", "maxDate"],
function (newValues, oldValues) {
so, my server side #lang param I would like to pass to the directive in order to use it in the template URL, like this:
templateUrl: '/templates/stDateRange.#(lang).html'
P.S.:
I'll take this codepen example to show my need:
var app = angular.module('app', []);
app.directive('testDirective', function(){
var lang = 'en'; // <<< Set the variable HERE << !!!
return {
restrict: 'E',
template: '<p>my lang is "<strong>'+lang+'</strong>" </p>'
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<section ng-app="app" ng-init="lang='fr'">
<h3>Test directive for 'fr' lang</h3>
<test-directive></test-directive>
</section>
If I understand you right, you want to create dynamic templateUrl based on attr.lang.
So I would write your directive as:
app.directive('stDateRange', [function () {
return {
restrict: 'E',
require: '^stTable',
template: '<ng-include src="getTemplateUrl()"/>',
scope: false,
link: function (scope, element, attr, ctrl) {
scope.getTemplateUrl = function () {
var url = '/templates/stDateRange.' + attrs.lang + '.html'
return url;
};
var tableState = ctrl.tableState();
scope.$watchGroup(["minDate", "maxDate"],
function (newValues, oldValues) {
And HTML call:
<test-directive lang="{{lang}}"></test-directive>
Demo Plunker
[Edit 1]
If you don't want to use link, you can load constant:
app.directive('testDirective', function(Constants){
var lang = Constants.val;
return {
restrict: 'E',
template: '<p>my lang is "<strong>'+lang+'</strong>" </p>'
};
});
app.constant('Constants', {
val: 'Fess'
});
Demo Codepen
You cannot use $scope on your application directive ng-app but you can use $rootScope. I would achieve this by parsing $root.language into your directive and finally load the template dynamically. You could also access $rootScope.language inside your directive directly without parsing $root.language into it. You can do as you wish - demo punkr.
AngularJS application:
var app = angular.module('plunker', []);
app.controller('ApplicationController', function($scope) {});
app.directive('test', function ($http, $compile) {
return {
scope: {
lang: '='
},
restrict: 'E',
link: function(scope, element) {
$http.get('./template.'+ scope.lang +'.html').then(function (result) {
scope.test = 'some test';
element.html(result.data);
$compile(element.contents())(scope);
});
}
};
});
View:
<!doctype html>
<html ng-app="plunker" ng-init="language = 'en'">
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<test lang="$root.language"></test>
</div>
</div>
</body>
</html>
Template which includes your server side param:
<!doctype html>
<html ng-app="plunker" ng-init="language = '#lang'">
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<test lang="$root.language"></test>
</div>
</div>
</body>
</html>
I have directive named openDialog as follows. How can I use it from the view with the button click? Here is my code for the directive
app.directive('openDialog', ['ngDialog', function (ngDialog) {
return {
restrict: 'A',
link: function ($scope, $element, $attrs) {
var openDialog = function () {
ngDialog.open({
//template: $attrs.openDialog,
template: 'src/app/reservation/addReview.html',
//ngDialog.open({ template: 'src/app/reservation/addReview.html'}),
scope: $scope,
showClose: false,
closeByEscape:true
});
};
$element.on('click', openDialog);
}
};
}]);
Try like this,
<div ng-controller="ctrl">
<mydirc></mydirc>
<button ng-click="clickMe()">call clickMe()</button>
</div>
app.directive('mydirc', function() {
return {
restrict: 'E',
replace: true,
template: '<div></div>',
link: function($scope, element, attrs) {
$scope.clickMe= function() {
alert('inside click');
}
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
Your Code is right.
var app = angular.module('temp',['ngDialog']);
app.controller('mainCtrl', function($scope,$http,ngDialog){
$scope.label = "ME ANGULAR, gaga!"
});
app.directive('openDialog', ['ngDialog', function (ngDialog) {
return {
restrict: 'A',
link: function ($scope, $element, $attrs) {
var openDialog = function () {
ngDialog.open({
template: 'firstDialog',
scope: $scope,
showClose: false,
closeByEscape:true
});
};
$element.on('click', openDialog);
}
};
}]);
<!doctype html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Example - example-ng-keypress-production</title>
<link rel="stylesheet" type="text/css" href="//likeastore.github.io/ngDialog/css/ngDialog.css">
<link rel="stylesheet" type="text/css" href="//likeastore.github.io/ngDialog/css/ngDialog-theme-default.css">
<link rel="stylesheet" type="text/css" href="//likeastore.github.io/ngDialog/css/ngDialog-theme-flat.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="//likeastore.github.io/ngDialog/js/ngDialog.min.js"></script>
</head>
<body ng-app="temp">
<div ng-controller="mainCtrl">
<label>{{label}}</label>
<br/>
<button open-Dialog>Clickme</button>
</div>
</body>
<script type="text/ng-template" id="firstDialog">
<div class="ngdialog-message">
<h1>Hello</h1><i>I'm ufa, you loaded me</i>
</div>
</script>
</html>
I used this solution to replace root node with template and it was ok. But then it was necessary to change template url dynamically. In this case previous template remains on page and new template adds after it on template url changing. Is it possible to avoid this behavior somehow? I still need to replace root element because of makeup troubles.
angular.module("app", [])
.directive('includeReplace', function() {
return {
require: 'ngInclude',
restrict: 'A',
link: function(scope, el, attrs) {
el.replaceWith(el.children());
}
};
})
.controller("MainController", function() {
this.tpl = "tpl1.html";
this.toggle_tpl = function() {
this.tpl = (this.tpl == 'tpl1.html') ? 'tpl2.html' : 'tpl1.html';
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="MainController as mCtrl">
<script type="text/ng-template" id="tpl1.html">
<div>First template</div>
</script>
<script type="text/ng-template" id="tpl2.html">
<div>Second template</div>
</script>
<button ng-click="mCtrl.toggle_tpl()">toggle</button>
<div ng-include="mCtrl.tpl" include-replace>
</div>
</div>
</div>
Try .html() instead of .replaceWith()
angular.module("app", [])
.directive('includeReplace', function() {
return {
require: 'ngInclude',
restrict: 'A',
link: function(scope, el, attrs) {
el.html(el.children().html()); // My changes in the line
}
};
})
.controller("MainController", function() {
this.tpl = "tpl1.html";
this.toggle_tpl = function() {
this.tpl = (this.tpl == 'tpl1.html') ? 'tpl2.html' : 'tpl1.html';
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="MainController as mCtrl">
<script type="text/ng-template" id="tpl1.html">
<div>First template</div>
</script>
<script type="text/ng-template" id="tpl2.html">
<div>Second template</div>
</script>
<button ng-click="mCtrl.toggle_tpl()">toggle</button>
<div ng-include="mCtrl.tpl" include-replace>
</div>
</div>
</div>
I just made an example of how I am trying to use transclude data binding. Well, after binding an object (message) from controller scope its "undefined" in directive's link function.
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script>
angular.module('myApp', []).controller('myAppController', function($scope)
{
$scope.message = { text: 'hello'}
});
angular.module('myApp').directive('myDirective', function() {
return {
restrict: 'E',
template: "<div><div ng-transclude></div></div>",
transclude: true,
scope: { message: "=" },
link: function (scope) {
// Its undefined here
console.log(scope.message);
}
};
})
</script>
</head>
<body ng-controller="myAppController">
<my-directive>
{{message.text}}
</my-directive>
</body>
</html>
Any help would be appreciated, Thanks
[EDIT]
Maybe I have not been too clear. Actually my code is kinda:
Home.html
Sorry, maybe I have not been too clear. Actually my code is KINDA:
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script>
angular.module('myApp', []).controller('myAppController', function($scope)
{
$scope.model = { id: 100, name: "name"}
});
angular.module('myApp').directive('myDirective', function() {
return {
restrict: 'E',
templateUrl: "Modal.html",
transclude: true,
scope: { model: "=" },
link: function (scope) {
// Its undefined here
console.log(scope.model);
}
};
})
</script>
</head>
<body ng-controller="myAppController">
<my-directive>
<div>
id:<input type="text" ng-model="model.id" />
name:<input type="text" ng-model="model.name" />
<button class="btn btn-primary" ng-click="doIt()">do something</button>
</div>
</my-directive>
</body>
</html>
Modal.html
<div class="modal-header">
<h3 class="modal-title">Edit modal</h3>
</div>
<div class="modal-body">
<div ng-transclude>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="btnModalGravar()">Gravar</button>
<button class="btn btn-warning" ng-click="btnModalCancelar()">Cancelar</button>
</div>
Im just wondering why "console.log(scope.model)" returns "undefined" in directive's link function after using scope: { model: "=" }
angular.module('myApp').directive('myDirective', function() {
return {
restrict: 'E',
template: "<div><div ng-transclude></div></div>",
transclude: true,
scope: { message: "=" },
link: function (scope) {
}
};
})
//Html
<my-directive message="message">
{{message.text}}
</my-directive>
If you are trying to pass some data to directive it's not a translusion but an isolated scope. You've almost got it. Just use your directive like this:
<body ng-controller="myAppController">
<my-directive message="message"></my-directive>
<!-- This way you're referencing your $scope.message object, so it's like you've had:
<my-directive message="{text: 'hello'}"></my-directive>
-->
</body>
Transclusion is used to pass not some data but some markup (i.e. html, other directives).
If you want to use transcluded content inside your linking function, you should use it as a 5th parameter of this function, like this:
// Directive excerpt
return {
...
transclude: true,
link: function(scope, el, attrs, ctrl, transclude) {
var transcluded = transclude();
console.log(transcluded);
}
};
// View excerpt
<my-directive message="message">
<span>{{ message.text }}</span>
</my-directive>
You can take a look at Isolating the Scope of a Directive section in angular documentation Creating Custom Directives
I'm trying to migrate from angular 1.2.28 to angular 1.3.16, however my code broke.
Angular 1.2.28 working: http://plnkr.co/edit/XfVakwA3Upm7Z2wosHCQ?p=preview
Angular 1.3.16 not working: http://plnkr.co/edit/4VxcHL0MHddobkmu9DMG?p=preview
JS
var app = angular.module('app', []);
app.run(function($rootScope, $timeout){
$rootScope.loading = true;
$timeout(function(){
$rootScope.items = ['Angular', '1.3.16', 'doesnt work'];
$rootScope.loading = false;
}, 3000);
});
app.directive('refresh', function(){
return {
restrict: 'A',
require: '^myDirective',
link: function(scope, element, attrs, ctrl){
if(scope.$last)
ctrl.init();
}
};
});
app.directive('myDirective', function(){
return {
restrict: 'E',
replace: true,
transclude: true,
template: '<div class="my-directive"><p>Height: {{myHeight}}</p> <div ng-transclude></div></div>',
controller: function($scope, $element){
this.init = init;
function init(){
$scope.myHeight = $('.my-directive').height();
}
}
};
});
HTML
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#1.3.16" data-semver="1.3.16" src="https://code.angularjs.org/1.3.16/angular.js"></script>
<script data-require="jquery#1.11.0" data-semver="1.11.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Angular 1.3.16</h1>
<div ng-show="loading">Loading...</div>
<my-directive ng-hide="loading">
<div ng-repeat="item in items" refresh>
<p>{{item}}</p>
</div>
</my-directive>
</body>
</html>
The idea is to only run certain code when the inner html is outputted.
Height is 0 in angular 1.3.16.
However, if I remove ng-hide="loading" from <my-directive ng-hide="loading"> in angular 1.3.16, height gets the appropriated value.
Any ideas how can I solve this?
Inject $timeout into your directive and put the init code block in $timeout(function(){ ... }) like this:
app.directive('myDirective', function($timeout){
return {
restrict: 'E',
replace: true,
transclude: true,
template: '<div class="my-directive"><p><b>Height: {{myHeight}}</b></p> <div ng-transclude></div></div>',
controller: function($scope, $element){
this.init = init;
function init(){
$timeout(function(){
$scope.myHeight = $('.my-directive').height();
});
}
}
};
});
var app = angular.module('app', []);
app.run(function($rootScope, $timeout) {
$rootScope.loading = true;
$timeout(function() {
$rootScope.items = ['Angular', '1.3.16', ' work'];
$rootScope.loading = false;
}, 1000);
});
app.directive('myDirective', function($timeout) {
return {
restrict: 'E',
replace: true,
transclude: true,
template: '<div class="my-directive"><p>Height: {{myHeight}}</p> <div ng-transclude></div></div>',
link: function($scope, $element) {
$element.on('DOMAttrModified DOMSubtreeModified', init);
function init() {
$scope.$apply(function() {
$scope.myHeight = $element.height();
});
}
}
};
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="jquery#1.11.0" data-semver="1.11.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script data-require="angular.js#1.3.16" data-semver="1.3.16" src="https://code.angularjs.org/1.3.16/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Angular 1.3.16</h1>
<div ng-show="loading">Loading...</div>
<my-directive ng-hide="loading">
<div ng-repeat="item in items" refresh>
<p>{{item}}</p>
</div>
</my-directive>
</body>
</html>
You have to set the height in the correct angular directive phase/lifecycle. You should set the hight in the link or even postlink phase. Usually the two phases are the same if you don't use prelink This is when all the content has already been rendered. See angular $compile or google for angular post link
The controller is for the logic and the link is for html/dom manipulations.
EDIT:
You can bind 'DOMAttrModified DOMSubtreeModified` events to trigger changes.