My custom directive runs fine onload page load but when added using append it does not run properly. It does not show its content when at in runtime.
HTML:
<!doctype html>
<html lang="en" ng-app="module1">
<head>
<meta charset="UTF-8">
<title>Angular Demo</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/angular.js"></script>
<script src="js/ui-bootstrap-tpls-0.13.0.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div id="divContainer" style="border-style: solid;border-color:red;" ng-controller = "Controller1 as cnt1" >
<button ng-click="clicked();">Click Me!!</button>
<wlaccordion></wlaccordion>
</div>
</body>
</html>
app.js:
var app = angular.module('module1',[]);
app.controller('Controller1', ['$scope', function($scope) {
$scope.authorData = authorInfo;
$scope.clicked = function () {
alert('Clicked');
//angular.element(document.getElementById('divContainer')).append('<wlaccordion1></wlaccordion1>' (scope));
angular.element(document.getElementById('divContainer')).append('<wlaccordion></wlaccordion>');
}
}]);//controller1
var authorInfo = [
{
'name': 'Ray',
'rate': '10',
'show': 'true'
},
{
'name': 'Mahesh',
'rate': '12',
'show': 'true'
}
]
app.directive("wlaccordion", function($compile) {
var template = '<div ng-controller = "Controller1 as cnt1">' +
'<div ng-repeat="aData in authorData" ng-init="tab = 1">' +
'<ul>' +
'<li>' +
'<h1 ng-show={{aData.show}} ng-class="{active: tab === 1}"> {{aData.name}} </h1>' +
'<h1 ng-show={{aData.show}} ng-class="{active: tab === 2}"> {{aData.rate | currency}} </h1>' +
'</li>' +
'</ul>' +
'</div>' +
'</div>';
return{
link: function(scope, element){
var content = $compile(template)(scope);
element.append(content);
}
}
});
I would like the directive to function same as onload.
-Thanks
Mahesh
AngularJS intended for separation of presentation logic and business one. So I think you should do this in Angular way, your current approach is more jQuery one.
I would suggest you to add accordions collection to controller:
app.controller('Controller1', ['$scope', function($scope) {
$scope.accordions = [0]; // Replace 0 with some actual data
$scope.clicked = function() {
$scope.accordions.push($scope.accordions.length); // Same here
};
// Your other code
}
And in HTML add ng-repeat:
<div id="divContainer" style="border-style: solid;border-color:red;" ng-controller = "Controller1 as cnt1" >
<button ng-click="clicked();">Click Me!!</button>
<wlaccordion ng-repeat="accordion in accordions"></wlaccordion>
</div>
Edit: Also don't forget to remove compilation from wlaccordion's link.
Edit #2: I suppose that authorInfo global var is used simply for example, however if it doesn't then consider usage of module.constant or module.value
app.controller('Controller1', ['$scope','$compile', function($scope, $compile) {
$scope.authorData = authorInfo;
$scope.clicked = function () {
alert('Clicked');
//angular.element(document.getElementById('divContainer')).append('<wlaccordion1></wlaccordion1>' (scope));
angular.element(document.getElementById('divContainer')).append($compile('<wlaccordion></wlaccordion>')($scope));
}
}]);//controller1
Related
I am trying to add form elements dynamically using JS and will need a directive. I am able to add form elements but when I have ng-options or ng-repeat it does not get compiled. I have an example directive I am using for demo.
http://plnkr.co/edit/JOzTWB6tuyilCJ8Rj37Q
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller("fCtrl",function($scope){
$scope.xx = ['x','c','y','z','a'];
});
app.directive('datanType', function ($compile) {
var testTemplate1 = '<h1 ng-repeat="x in xx">Test</h1>';
var testTemplate2 = '<h1>Test2</h1>';
var testTemplate3 = '<h1>Test3</h1>';
var getTemplate = function(contentType){
var template = '';
switch(contentType){
case 'test1':
template = testTemplate1;
break;
case 'test2':
template = testTemplate2;
break;
case 'test3':
template = testTemplate3;
break;
}
return template;
};
var linker = function(scope, element, attrs){
element.html(getTemplate(attrs.content));
$compile(element.contents())(scope);
};
return {
restrict: "E",
replace: true,
link: linker,
scope: {
content:'=',
con:'#'
}
};
});
</script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-controller="fCtrl">
<p>Result:</p>
<datan-type content="test1" con="{{xx}}"></datan-type>
</body>
</html>
Try this method, its working http://plnkr.co/edit/NTG0LBa1dIPWcGGupJgt?p=preview
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller("fCtrl",function($scope){
$scope.xx = ['x','c','y','z','a'];
});
app.directive('datanType', function ($compile) {
return {
restrict: 'E',
replace: true,
link: function (scope, ele, attrs) {
var testTemplate1 = '<h1 ng-repeat="x in arr">Test</h1>';
var testTemplate2 = '<h1>Test2</h1>';
var testTemplate3 = '<h1>Test3</h1>';
var template = '';
scope.arr = eval(attrs.con);
switch(attrs.content){
case 'test1':
template = testTemplate1;
break;
case 'test2':
template = testTemplate2;
break;
case 'test3':
template = testTemplate3;
break;
}
ele.html(template);
$compile(ele.contents())(scope);
}
};
});
</script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-controller="fCtrl">
<p>Result:</p>
<datan-type content="test1" con="{{xx}}"></datan-type>
</body>
</html>
This should work. Here are the following changes I did:
con is already binded to scope. no need to use attrs
var testTemplate1 = '<h1 ng-repeat="x in con">Test {{x}}</h1>';
Changed # to = to bind scope property to parent scope (# bounds as string, see this
scope: {
content: '=',
con: '='
}
Changed {{xx}} to xx
<datan-type content="test1" con="xx"></datan-type>
Working plunker http://plnkr.co/edit/P54mZhXWE7AnjfCWbQRb
First of all, the way i am doing may not be correct. But i will explain the problem:
1) I am creating directive called as < firstDirective >
2) when the clicks on a button in the first directive, then I am trying to insert the second directive dynamically at runtime
As follows:
<!DOCTYPE html>
<html>
<script src="lib/angular/angular.js"></script>
<body ng-app="myApp">
<first-directive></first-directive>
<script>
var app = angular.module("myApp", []);
app.directive("firstDirective", function() {
return {
template : '<h1>This is first directive!</h1> <br / ><br / ><button type="button" ng-click="firstCtrl()">Click Me to second directive!</button> <div id="insertSecond"></div> ',
controller: function ($scope) {
$scope.firstCtrl = function($scope) {
angular.element(document.querySelector('#insertSecond')).append('<second-directive></second-directive>');
}
}
}
});
app.directive("secondDirective", function() {
return {
template : '<h1>This is second directive!</h1> <br / ><br / >',
controller: function ($scope) {
}
}
});
</body>
</html>
But it is not working, i mean, it is inserting the "< second-directive > < / second-directive >" text but not the content as per the directive above.
I am new to angular js, I think we can do this in a different way or my approach itself is not correct. But all i want to insert the second directive dynamically.
EDIT:: I got the solution for this, thanks to the George Lee:
Solution is we have to compile as follows, but didn’t pass scope object to the function:
<!DOCTYPE html>
<html>
<script src="lib/angular/angular.js"></script>
<body ng-app="myApp">
<first-directive></first-directive>
<script>
var app = angular.module("myApp", []);
app.directive("firstDirective", function($compile) {
return {
templateUrl : '<h1>This is first directive!</h1> <br / ><br / ><button type="button" ng-click="firstCtrl()">Click Me to second directive!</button> <div id="insertSecond"></div> ',
controller: function ($scope) {
$scope.firstCtrl = function() {
var ele = $compile('<second-directive></second-directive>')($scope);
angular.element(document.querySelector('#insertSecond')).append(ele);
}
}
}
});
app.directive("firstDirective", function() {
return {
templateUrl : '<h1>This is second directive!</h1> <br / ><br / >',
controller: function ($scope) {
}
}
});
Also, this link , gives very good explanation of how to dynamically compile and inject the templates.
You can use the $compile service in Angular, make sure you include it in the dependency injection.
app.directive("firstDirective", ['$compile', function($compile) {
...
controller: function ($scope) {
$scope.firstCtrl = function() {
var ele = $compile('<second-directive></second-directive>')($scope);
angular.element(document.querySelector('#insertSecond')).append(ele);
}
}
There is one more problem instead of templateUrl, template should be there
<!DOCTYPE html>
<html>
<script data-require="angular.js#1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
<first-directive></first-directive>
<script>
var app = angular.module("myApp", []);
app.directive("firstDirective", function($compile) {
return {
template : '<h1>This is first directive!</h1> <br / ><br / ><button type="button" ng-click="firstCtrl()">Click Me to second directive!</button> <div id="insertSecond"></div> ',
controller: function ($scope) {
$scope.firstCtrl = function() {
var ele = $compile('<second-directive></second-directive>')($scope);
angular.element(document.querySelector('#insertSecond')).append(ele);
}
},
restrict: "EAC"
}
});
app.directive("secondDirective", function() {
return {
template : '<h1>This is second directive!</h1> <br / ><br / >',
controller: function ($scope) {
},
restrict: "EAC"
}
});
</script>
</body>
</html>
I have a AngularJS directive which takes an ID and makes a lookup on this ID to get col-width, hide-state and order for a given flexbox element.
What I d like to do is to add a ng-if=false attribute to the element if its hide-state is true. Is there any way, how I can add ng-if attribute from within a directive to a element?
My current code:
.directive("responsiveBehaviour", ['ResponsiveService', function(ResponsiveService){
var linkFunction = function(scope, element, attributes){
var id = attributes["responsiveBehaviour"];
var updateResponsiveProperties = function(){
element.attr("column-width", ResponsiveService.getWidth(id));
if(ResponsiveService.getOrder(id)){
element.attr("order", ResponsiveService.getOrder(id));
}
if(ResponsiveService.getHidden(id) == true){
element.attr("hidden", "");
} else {
element.removeAttr("hidden");
}
};
if(id) {
scope.$watch('device', function () {
updateResponsiveProperties();
});
}
};
If I add
element.attr("ng-if", false);
instead of
element.attr("hidden", "");
it just renders out the ng-if attribute to the element but there is no action happening, so the element is still rendered and visible although ng-if is false.
Do you have any idea on how to achieve what I am looking for?
Thanks in advance.
Greets
something like below:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
app.directive( 'test', function ( $compile ) {
return {
restrict: 'E',
scope: { text: '#' },
template: '<p ng-click="add()">Jenish</p>',
controller: function ( $scope, $element ) {
$scope.add = function () {
var el = $compile( "<test text='n'></test>" )( $scope );
$element.parent().append( el );
};
}
};
});
working plunk is here
Update
Here is simple example as you requested.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.add = function () {
alert('Jenish');
$scope.cond = false;
}
$scope.cond = true;
});
app.directive( 'test', function ( $compile ) {
return {
restrict: 'E',
template: '<p ng-click="add()">Click me to hide</p>',
link: function ( $scope, $element, attr ) {
var child = $element.children().attr('ng-if', 'cond')
console.log($element)
$compile(child)($scope);
}
};
});
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.13/angular.js" data-semver="1.3.13"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<test></test>
</body>
</html>
I hope this would help you.
In angular js, I want to create a validator that will cause the ng-model value to become invalid when another value is specified. Now I have something that works fine for angular js 1.1.4 (which I was using because I was using an old plunkr), but when I switch to 1.1.5, it stops working.
I am sure I am doing something wrong with the scope, but I am not sure what.
Here is my code (plunkr here: http://plnkr.co/edit/Ug9oM1LNqPpTsONhRTnG?p=preview)
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.doSomething = function () {
alert('Submitted!');
}
$scope.data = {};
$scope.data.value = new String('blah');
$scope.data.value.$$error = 'My Error';
$scope.data.toggleError = function() {
if ($scope.data.value.$$error) {
$scope.data.value.$$error = null;
}
else {
$scope.data.value.$$error = "SOME ERROR";
}
};
console.log($scope.data.value instanceof String);
});
app.directive('serverError', function (){
return {
require: 'ngModel',
scope:true,
link: function(scope, elem, attr, ngModel) {
scope.$watch('attr.errorValue', function() {
console.log("The error value is " + scope.errorValue);
ngModel.$setValidity('serverError', scope.errorValue == null);
});
}
};
});
Here is my HTML:-
<!DOCTYPE html>
<html ng-app="angularjs-starter">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js"></script>
<link rel="stylesheet" href="style.css">
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<form name="myForm" ng-submit="doSomething()">
<input type="text" name="fruitName" ng-model="data.value" serverError errorValue="data.value.$$error" />
<div>{{ data.value.$$error }}</div>
<span class="invalid" ng-if="myForm.fruitName.$error.serverError">
{{data.value.$$error}}
</span>
<br/>
<button type="submit" ng-disabled="myForm.$invalid">Submit</button>
<input type="button" ng-click="data.toggleError()" value="Toggle Error"/>
</form>
</body>
</html>
As soon as I change from 1.1.3 to 1.2.0, my directive stops working.
I worked it out.
http://plnkr.co/edit/Ug9oM1LNqPpTsONhRTnG?p=preview
The directive is simple enough:-
app.directive('serverError', function($parse) {
return {
// restrict to an attribute type.
restrict: 'A',
// element must have ng-model attribute.
require: 'ngModel',
// scope = the parent scope
// elem = the element the directive is on
// attr = a dictionary of attributes on the element
// ctrl = the controller for ngModel.
link: function(scope, elem, attr, ctrl) {
scope.$watch(attr.serverError, function(newValue, oldValue) {
if (newValue != null) {
ctrl.$setValidity('serverError', false);
}
else {
ctrl.$setValidity('serverError', true);
}
});
}
};
});
I want to broadcast angular event from javascript function i.e angular.injector(['ng', 'myModule']).get("mySharedService").prepForBroadcast('hello');
By using above line I can invoke prepForBroadcast() but I can't catch event in $scope.$on()
Note: I want to call prepForBroadcast() method from javascript function.
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<!-- SPELLS -->
<!-- load angular via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="script.js"></script>
<style>
.question{
border:1px solid darkgray;
padding:10px;
margin-bottom:10px;
}
</style>
</head>
<body>
<div ng-app="myModule">
<div id="appID" ng-controller="ControllerZero">
<input ng-model="message" >
</div>
<div ng-controller="ControllerOne">
<input ng-model="message" >
</div>
<div ng-controller="ControllerTwo">
<input ng-model="message" >
</div>
<my-component ng-model="message"></my-component>
</div>
</body>
<script>
angular.injector(['ng','myModule']).get("mySharedService").prepForBroadcast('hello');
</script>
</html>
script.js file
var myModule = angular.module('myModule', []);
myModule.factory('mySharedService', function($rootScope) {
var sharedService = {};
sharedService.message = '';
sharedService.prepForBroadcast = function(msg) {
console.log('prepForBroadcast');
this.message = msg;
this.broadcastItem();
};
sharedService.broadcastItem = function() {
console.log('broadcastItem');
$rootScope.$broadcast('handleBroadcast');
};
return sharedService;
});
myModule.directive('myComponent', function(mySharedService) {
return {
restrict: 'E',
controller: function($scope, $attrs, mySharedService) {
$scope.$on('handleBroadcast', function() {
$scope.message = 'Directive: ' + mySharedService.message;
});
},
replace: true,
template: '<input>'
};
});
function ControllerZero($scope, sharedService) {
$scope.$on('handleBroadcast', function() {
console.log('handle event');
$scope.message = sharedService.message;
});
}
function ControllerOne($scope, sharedService) {
$scope.$on('handleBroadcast', function() {
$scope.message = 'ONE: ' + sharedService.message;
});
}
function ControllerTwo($scope, sharedService) {
$scope.$on('handleBroadcast', function() {
$scope.message = 'TWO: ' + sharedService.message;
});
}
ControllerZero.$inject = ['$scope', 'mySharedService'];
ControllerOne.$inject = ['$scope', 'mySharedService'];
ControllerTwo.$inject = ['$scope', 'mySharedService'];
angular.injector() creates a new injector, and with it a new $rootScope. The event will be broadcasted on this new $rootScope instead of on the one your controllers are listening on.
You need to retrieve the injector already associated with your application:
angular.element(domElement).injector();
You also need to manually trigger the digest loop for the data bindings to update, for example by using $apply.
Example:
angular.element(document).ready(function() {
var element = angular.element(document.querySelector('.ng-scope'));
var injector = element.injector();
var scope = element.scope();
scope.$apply(function() {
injector.get('mySharedService').prepForBroadcast('hello');
});
});
Demo: http://plnkr.co/edit/NDKBdzSmvN1xY7alafir?p=preview
Another way of publishing events from one controller and listening them in other controllers would be to use angular-PubSub module.
The PubSub makes only subscribers to listen to the published events unlike the $rootScope.$broadcast in which it sends event to all the Scopes in Scope hierarchy making it inefficient as compared to the PubSub approach.