$sce.trustAsHtml and ng-bind-html are not meant to build HTML with directives. This technique will not work. This is because angular works by first compiling and then linking. See the conceptual overview for a good explaination. In short, by the time you link the HTML defined in your trustAsHtml, it is too late for angular to … Read more
Here’s a re-usable directive in the style of angular’s inbuilt event handling directives: angular.module(‘sbLoad’, []) .directive(‘sbLoad’, [‘$parse’, function ($parse) { return { restrict: ‘A’, link: function (scope, elem, attrs) { var fn = $parse(attrs.sbLoad); elem.on(‘load’, function (event) { scope.$apply(function() { fn(scope, { $event: event }); }); }); } }; }]); When the img load event … Read more
Are you passing the arguments inside {}s? E.g., inside the directive’s link function, you’ll want to call the method like so: scope.someCtrlFn({arg1: someValue}); <div my-directive callback-fn=”ctrlFn(arg1)”></div> app.directive(‘myDirective’, function() { return { scope: { someCtrlFn: ‘&callbackFn’ }, link: function(scope, element, attrs) { scope.someCtrlFn({arg1: 22}); }, } }); function MyCtrl($scope) { $scope.ctrlFn = function(test) { console.log(test); } … Read more
Your fiddles create three scopes: a scope associated with controller Ctrl, because of ng-controller a directive transcluded scope, because of transclude: true a directive isolate scope, because of scope: { … } In fiddle1, before we type anything into the text box we have the following: Scope 003 is the scope associated with the controller. … Read more
simple example: <div ng-style=”isTrue && {‘background-color’:’green’} || {‘background-color’: ‘blue’}” style=”width:200px;height:100px;border:1px solid gray;”></div> {‘background-color’:’green’} RETURN true OR the same result: <div ng-style=”isTrue && {‘background-color’:’green’}” style=”width:200px;height:100px;border:1px solid gray;background-color: blue”></div> other conditional possibility: <div ng-style=”count === 0 && {‘background-color’:’green’} || count === 1 && {‘background-color’:’yellow’}” style=”width:200px;height:100px;border:1px solid gray;background-color: blue”></div>
Instead of setting up a scope variable to indicate data loading status, it is better to have a directive does everything for you: angular.module(‘directive.loading’, []) .directive(‘loading’, [‘$http’ ,function ($http) { return { restrict: ‘A’, link: function (scope, elm, attrs) { scope.isLoading = function () { return $http.pendingRequests.length > 0; }; scope.$watch(scope.isLoading, function (v) { if(v){ … Read more
Essentially, and as-noted by @kevin-b: // find(‘#id’) angular.element(document.querySelector(‘#id’)) //find(‘.classname’), assumes you already have the starting elem to search from angular.element(elem.querySelector(‘.classname’)) Note: If you’re looking to do this from your controllers you may want to have a look at the “Using Controllers Correctly” section in the developers guide and refactor your presentation logic into appropriate directives … Read more
In short: if you want your data to have a different representation in the view and in the model, you will need a directive, which you can think of as a two-way filter. Your directive would look something like angular.module(‘myApp’).directive(‘myDirective’, function() { return { require: ‘ngModel’, link: function(scope, element, attrs, ngModelController) { ngModelController.$parsers.push(function(data) { //convert … Read more
This is sure thing that any plugin which has been added to angular doesn’t update the ng-model of angular scope, we need to manually do it on it’s jquery change event. In angular jquery plugin should always binded to DOM using directive, because directive does provide good control over a DOM. As you asked in … Read more
One way you can communicate between them using what is called eventing. One directive can emit an event on the rootscope which can then be listened by anybody who wants to. You could use $rootScope.$emit or $rootScope.$broadcast to publish events with data and use $scope.$on to listen to the event. In your case you could … Read more