Compile : This is the phase where Angular actually compiles your directive. This compile function is called just once for each references to the given directive. For example, say you are using the ng-repeat directive. ng-repeat will have to look up the element it is attached to, extract the html fragment that it is attached … Read more
When you have replace: true you get the following piece of DOM: <div ng-controller=”Ctrl” class=”ng-scope”> <div class=”ng-binding”>hello</div> </div> whereas, with replace: false you get this: <div ng-controller=”Ctrl” class=”ng-scope”> <my-dir> <div class=”ng-binding”>hello</div> </my-dir> </div> So the replace property in directives refer to whether the element to which the directive is being applied (<my-dir> in that case) … Read more
You have a lot of pointless jQuery in there, but the $compile service is actually super simple in this case: .directive( ‘test’, function ( $compile ) { return { restrict: ‘E’, scope: { text: ‘@’ }, template: ‘<p ng-click=”add()”>{{text}}</p>’, controller: function ( $scope, $element ) { $scope.add = function () { var el = $compile( … Read more
In which order the directive functions are executed? For a single directive Based on the following plunk, consider the following HTML markup: <body> <div log=’some-div’></div> </body> With the following directive declaration: myApp.directive(‘log’, function() { return { controller: function( $scope, $element, $attrs, $transclude ) { console.log( $attrs.log + ‘ (controller)’ ); }, compile: function compile( tElement, … Read more
UPDATE One of the collaborators has said it won’t be removed, but known bugs will not be fixed. https://github.com/angular/angular.js/commit/eec6394a342fb92fba5270eee11c83f1d895e9fb#commitcomment-8124407 ORIGINAL Here is the commit of this change: https://github.com/angular/angular.js/commit/eec6394a342fb92fba5270eee11c83f1d895e9fb The replace flag for defining directives that replace the element that they are on will be removed in the next major angular version. This feature has difficult … Read more
You need to add a directive, like this: Javascript: app.directive(‘myEnter’, function () { return function (scope, element, attrs) { element.bind(“keydown keypress”, function (event) { if(event.which === 13) { scope.$apply(function (){ scope.$eval(attrs.myEnter); }); event.preventDefault(); } }); }; }); HTML: <div ng-app=”” ng-controller=”MainCtrl”> <input type=”text” my-enter=”doSomething()”> </div>
I suspect looking at the excerpt that the function trustSrc from trustSrc(currentProject.url) is not defined in the controller. You need to inject the $sce service in the controller and trustAsResourceUrl the url there. In the controller: function AppCtrl($scope, $sce) { // … $scope.setProject = function (id) { $scope.currentProject = $scope.projects[id]; $scope.currentProjectUrl = $sce.trustAsResourceUrl($scope.currentProject.url); } } … Read more
If you want to use isolated scopes you can pass a control object using bi-directional binding = of a variable from the controller scope. You can also control also several instances of the same directive on a page with the same control object. angular.module(‘directiveControlDemo’, []) .controller(‘MainCtrl’, function($scope) { $scope.focusinControl = {}; }) .directive(‘focusin’, function factory() … Read more
See What are the nuances of scope prototypal / prototypical inheritance in AngularJS? To summarize: the way a directive accesses its parent ($parent) scope depends on the type of scope the directive creates: default (scope: false) – the directive does not create a new scope, so there is no inheritance here. The directive’s scope is … Read more
Writing Components without Watchers This answer outlines five techniques to use to write AngularJS 1.5 components without using watchers. Use the ng-change Directive Use the $onChanges Life-cycle Hook Use the $doCheck Life-cycle Hook Intercomponent Communication with require Push Values from a Service with RxJS Use the ng-change Directive what alt methods available to observe obj … Read more