I'm trying to code my first AngularJS directive. This directive should extend the DIV element to include a picture and a parameter (thumbnail). If thumbnail == true, the image should be resized. I managed to display the picture, yet it is not resized.
<!DOCTYPE html>
<html ng-app="ExampleDirective">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script>
angular.module('ExampleDirective', [])
.controller('MyController', function($scope, $window) {
})
.directive('mypicture', function () {
return {
restrict: 'A',
template: '<img src="picture.gif" width="calc()" />',
scope: {
thumbnail: '=',
},
link: function (scope, elem, attrs) {
scope.calc = function() {
if (scope.thumbnail === 'true') {
return 50;
}
};
}
}
});
</script>
</head>
<body ng-controller="MyController">
<div mypicture thumbnail="true" ></div>
</body>
</html>
Any idea how to fix it ?
Thanks!
Try to use ng-style instead:
js
app.directive('mypicture', function () {
return {
restrict: 'A',
template: '<img src="http://pagead2.googlesyndication.com/simgad/8173680700251715003"
ng-style="calc()" />',
scope: {
thumbnail: '=',
},
link: function (scope, elem, attrs) {
scope.calc = function() {
if (scope.thumbnail == true) {
return {width: 150 + 'px'};
}
return {width: 100 + 'px'}
};
}
}
});
Demo Fiddle
Related
I want to add an 'ng-pattern' directive to an input element through a custom directive. I don't want to do it in the templates directly, but it looks I'm getting in a infinite loop.
I tried to set first the 'html' and compile the element after (Angular compile in directive seems to go into infinite loop) but scope is undefined. I don't know if it's related with replacing element's content.
Should i create a new scope? Do I'm missing something?
Thanks in advance!
var myHtml = iElem[0].outerHTML;
iElem.replaceWith(myHtml);
var compiledElement = $compile(iElem)(iElem.scope());
HTML:
<input type="text" ng-model="personal.testNumber_string" my-model="personal.testNumber" dot-to-comma>
Directive:
function dotToCommaConverter($compile) {
return {
require: 'ngModel',
restrict: 'A',
scope: {
myModel: '='
},
controllerAs: 'dot2Comma',
controller: function($scope) {
this.myModel = $scope.myModel;
},
compile: function(tElem, tAttrs) {
return {
pre: function(scope, iElem, iAttrs) {
},
post: function(scope, iElem, iAttrs, modelCtrl) {
iElem.attr('ng-pattern', '/^-?[0-9]+(?:\,[0-9]+)?$/');
var compiledElement = $compile(iElem)(iElem.scope());
iElem.replaceWith(compiledElement);
modelCtrl.$setViewValue(String(scope.dot2Comma.myModel).replace('.', ','));
modelCtrl.$render();
modelCtrl.$parsers.push(function(inputValue) {
var transformedInput = inputValue.replace(/[^0-9,.-]/g, '');
transformedInput = transformedInput.replace('.', ',');
transformedInput = transformedInput.replace(' ', '');
if (transformedInput !== inputValue) {
modelCtrl.$setViewValue(transformedInput);
modelCtrl.$render();
}
if (!isNaN(Number(transformedInput.replace(',', '.')))) {
scope.myModel = Number(transformedInput.replace(',', '.'));
} else {
scope.myModel = undefined;
}
return transformedInput;
});
}
};
}
};
}
I needed to remove my own directive from the Html content before re-compiling again, that's what caused the infinite loop.
iElem.removeAttr('dot-to-comma');
iElem.attr('ng-pattern', '/^-?[0-9]+(?:\,[0-9]+)?$/');
iElem.attr('ng-blur', 'dot2Comma.myBlurFunction()');
var compiledElement = $compile(iElem)(scope);
iElem.replaceWith(compiledElement);
here is an sample directive which replace dots with commas in a textbox :
script.js
angular.module('app', []);
angular.module('app')
.controller('ExampleController', ['$scope', function($scope) {
$scope.my = { number: '123.456' };
}]);
angular.module('app')
.directive('dotToComma', function() {
return {
restrict: 'A',
link: function (scope, element, attrs) {
scope.$watch(attrs.ngModel, function (value) {
var newValue = value.replace('.', ',');
element.val(newValue);
});
}
}
});
index.html
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<form ng-controller="ExampleController">
<p>scope.my.number = {{my.number}}</p>
<label>In this textbox, dots will automatically be replaced with commas, even if you change its value :</label>
<input type="text" ng-model="my.number" dot-to-comma>
</form>
</body>
</html>
Here is a plunker : https://plnkr.co/edit/X6Fi0tnjBXKKhbwH0o2q?p=preview
Hope it helps !
I have two directives, parent directive should simply wrap around its child. The transclusion is used for this purpose.
However, then any other directive, such as ng-click, bound to the child directive element as its attribute does not work (is it not compiled?).
Here is the JS:
(function(angular) {
'use strict';
angular.module('docsIsoFnBindExample', [])
.controller('Controller', ['$scope', '$timeout', function($scope, $timeout) {
$scope.name = 'Tobias';
$scope.message = '';
$scope.hideDialog = function(message) {
$scope.message = message;
$scope.dialogIsHidden = true;
$timeout(function() {
$scope.message = '';
$scope.dialogIsHidden = false;
}, 2000);
};
}]) //controller is not important now
.directive('myDialog', function() { //parent directive
return {
restrict: 'E',
transclude: true,
scope: {
'close': '&onClose'
},
template: '<div class="alert"><a href class="close" ng-click="close({message: \'closing for now\'})">×</a><div ng-transclude></div></div>'
};
})
.directive('daka', function() { //child directive
return {
restrict: 'E',
scope: {
'input': '#'
},
link: function(scope, element, attributes) {
scope.func= function() {
console.log("blablabla"); //no console output after click event
};
}
};
});
})(window.angular);
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-directive-transclusion-scope-production</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="docsIsoFnBindExample">
<div ng-controller="Controller">
{{message}}
<my-dialog ng-hide="dialogIsHidden" on-close="hideDialog(message)">
<daka ng-click="func()" input="11">BLABlABLA</daka>
</my-dialog>
</div>
</body>
</html>
It is trying to look ng-click in your parent directive.
So you can add click event for your child directive.
.directive('daka', function() { //child directive
return {
restrict: 'E',
scope: {
'input': '#'
},
link: function(scope, element, attributes) {
element.on('click', function() {
alert('outcome clicked: ');
});
}
}; });
working jsfiddle link -https://jsfiddle.net/p2vht8sb/
I'm trying to share the logic between these two directives, I'm still learning Angular and don't quite understand how to accomplish this. I'm getting a $compile:ctreq error. I have watched some tutorials and I believe the logic is supposed to be in the controller but I get an error and the page wont load. I have a simple Pomodoro timer and would like the buttons to each be there own directive. Maybe I should be doing this with controllers but either way I would like to know how this works. Thanks..
var app = angular.module('pomodoro_timer', ['ui.router', 'firebase']);
app.directive("timer", ['$interval', function($interval) {
return {
restrict: "E",
transclude: true,
controller: function() {
},
templateUrl: "/templates/timer.html",
link: function(scope,element,attributes) {
scope.intrvl;
scope.t = 10;
var tDiv = $(element).find('#time');
scope.min = "25";
scope.sec = "00";
scope.interval = function() {
scope.intrvl = $interval(function(){
if (scope.t == 0) {
scope.resetTimer();
scope.sessionComplete = false;
} else {
scope.t -= 1;
scope.displayTime()
}
},1000)
}
scope.toggleClass = function() {
tDiv.toggleClass('notWorking working');
}
}
};
}]);
app.directive('start', function() {
return {
restrict: 'E',
transclude: true,
scope: {},
require: "^timer",
templateUrl: '/templates/start.html',
link: function (scope, element, attr, timerCtrl) {
scope.startTimer = function() {
if (tDiv.hasClass("notWorking")) {
// scope.working = true;
scope.interval(scope.t);
scope.toggleClass();
}
};
}
};
});
HTML
<!DOCTYPE html>
<html ng-app="pomodoro_timer">
<head lang="en">
<title>Pomodoro Timer</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.1.1/angularfire.min.js"></script>
</head>
<body>
<timer></timer>
<start></start>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="application/javascript" src="/js/app.js"></script>
</body>
</html>
As you are using require: '^timer' inside start, that means you are assuming that your start directive should be inside timer directive so that start directive can get access to the controller of timer directive.
Also you should place the expo-sable method inside controller rather than placing it into link function, controller could be accessible by the directive which require this controller.
Markup
<timer>
<start></start>
</timer>
Code
app.directive("timer", ['$interval', function($interval) {
return {
restrict: "E",
transclude: true,
controller: function($scope) {
$scope.interval = function() {
$scope.intrvl = $interval(function() {
if (scope.t == 0) {
$scope.resetTimer();
$scope.sessionComplete = false;
} else {
$scope.t -= 1;
$scope.displayTime()
}
}, 1000)
};
$scope.toggleClass = function() {
tDiv.toggleClass('notWorking working');
};
},
templateUrl: "/templates/timer.html",
link: function(scope, element, attributes) {
scope.intrvl = 0; //set default value
scope.t = 10;
var tDiv = $(element).find('#time');
scope.min = "25";
scope.sec = "00";
}
};
}]);
app.directive('start', function() {
return {
restrict: 'E',
transclude: true,
scope: {},
require: "^timer",
templateUrl: '/templates/start.html',
link: function(scope, element, attr, timerCtrl) {
scope.startTimer = function() {
if (tDiv.hasClass("notWorking")) {
//calling method of `timer` directive controller
timerCtrl.interval(scope.t);
timerCtrl.toggleClass();
}
};
}
};
});
I created this directive
angular.module('panel')
.directive('sigPanel', sigPanel)
function sigPanel() {
return {
restrict: 'E',
scope:{
imgData:"="
},
templateUrl: 'app/widgets/signature/signature.html',
link: function (scope, element, attrs) {
console.log(scope.imgData);
}
}
}
This is the templateURL:
<canvas style="border:1px solid black;"></canvas>
And added this into the HTML:
<sig-panel imgData="test"></sig-panel>
The console log only outputs "undefined", shouldn't it log "test"? I know the directive html tag is working properly because the canvas appears on the page, but why won't the directive pick up the value of "imgData"?
If I try setting the scope.imgData inside the directive I get the error
[$compile:nonassign] Expression 'undefined' used with directive 'signaturePanel' is non-assignable!
Not sure why this is happening.
You need to change imgData (camelCase normalized) to img-data (dash-delimited). Also if you want to pass the string "test" to the scope you need to put quotes around it.
angular.module('app', []).directive('sigPanel', sigPanel);
function sigPanel() {
return {
restrict: 'E',
scope: {
imgData: "="
},
template: '<canvas style="border:1px solid black;"></canvas>',
link: function(scope, element, attrs) {
console.log(scope.imgData);
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app='app'>
<sig-panel img-data="'test'"></sig-panel>
</div>
assignable example:
angular.module('app', [])
.controller('myController', function($scope) {
$scope.test = 'test';
})
.directive('sigPanel', sigPanel);
function sigPanel() {
return {
restrict: 'E',
scope: {
imgData: "="
},
template: '<canvas style="border:1px solid black;"></canvas>',
link: function(scope, element, attrs) {
console.log(scope.imgData);
scope.imgData = 'bob';
console.log(scope.imgData);
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app='app' ng-controller='myController'>
<sig-panel img-data="test"></sig-panel>
{{ test }}
</div>
I have a widget that I'm instantiating using ng-repeat. Initial creation works fine, but after that it stops updating. Here's an excerpt from index.html:
<div>
<x-node ng-repeat="node in nodes"></x-node>
</div>
partials/node.html:
<div>{{node.name}}</div>
And the directive:
angular.module('directive', []).directive('node', function() {
return {
restrict: 'E',
scope: true,
templateUrl: 'partials/node.html',
replace: true,
compile: function(tElement, tAttrs, transclude) {
return {
post: function(scope, iElement, iAttrs) {
scope.$on('$destroy', function(event) {
console.log('destroying');
});
}
};
}
};
});
If I modify the list of nodes in the console like this:
var e = angular.element($0);
var s = e.scope();
s.nodes.splice(1,1);
s.$apply()
... then the $destroy callback runs, but the rendered elements do not change. Is there something I'm missing from my directive?
Demo: Plunker
It seems this was indeed a bug, which is fixed in the 1.2 series of AngularJS. Here's an updated demo that uses 1.2.
index.html:
<!DOCTYPE html>
<html ng-app="my-app">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="AppController">
<div id="ct">
<x-node ng-repeat="node in nodes"></x-node>
</div>
<button id="test">Remove element [1]</button>
</body>
</html>
app.js:
var app = angular.module('my-app', [], function () {
})
app.controller('AppController', function ($scope) {
$scope.nodes = [{
name: 'one'
}, {
name: 'two'
}, {
name: 'three'
}];
})
app.directive('node', function() {
return {
restrict: 'E',
scope: true,
templateUrl: 'node.html',
replace: true,
compile: function(tElement, tAttrs, transclude) {
return {
post: function(scope, iElement, iAttrs) {
scope.$on('$destroy', function(event) {
console.log('destroying');
});
}
};
}
};
});
$(function(){
$('#test').click(function(){
var el = $('#ct').children().first();
if(el.length){
var e = angular.element(el[0]);
var s = e.scope();
s.nodes.splice(1,1);
s.$apply()
}
})
});
node.html:
<div>{{node.name}}</div>