angularjs-directive – Page 14

Angular: calling controller function inside a directive link function using &

March 25, 2023 by Tarik

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

Generic Angular Components – Optional Bindings

March 24, 2023 by Tarik

I would utilise the fact that the template property can be a function (tElem, tAttrs) { … } (docs) that returns a string to modify the template based on the attributes present. The way I would do this is to use jQuery and some custom elements to indicate which parts of the template are conditional. … Read more

Using a directive inside an ng-repeat, and a mysterious power of scope ‘@’

March 23, 2023 by Tarik

In drinkLonghand, you use the code scope.flavor = attrs.flavor; During the linking phase, interpolated attributes haven’t yet been evaluated, so their values are undefined. (They work outside of the ng-repeat because in those instances you aren’t using string interpolation; you’re just passing in a regular ordinary string, e.g. “strawberry”.) This is mentioned in the Directives … Read more

Set focus on first invalid input in AngularJs form

March 23, 2023 by Tarik

Ok, so the answer was simpler than I thought. All I needed was a directive to put on the form itself, with an event handler looking for the submit event. This can then traverse the DOM looking for the first element that has the .ng-invalid class on it. Example using jQLite: myApp.directive(‘accessibleForm’, function () { … Read more

Angular directive for a fallback image

March 23, 2023 by Tarik

No but you can create one. http://jsfiddle.net/FdKKf/ HTML: <img fallback-src=”http://google.com/favicon.ico” ng-src=”{{image}}”/> JS: myApp.directive(‘fallbackSrc’, function () { var fallbackSrc = { link: function postLink(scope, iElement, iAttrs) { iElement.bind(‘error’, function() { angular.element(this).attr(“src”, iAttrs.fallbackSrc); }); } } return fallbackSrc; });

Find child element in AngularJS directive

March 23, 2023 by Tarik

jQlite (angular’s “jQuery” port) doesn’t support lookup by classes. One solution would be to include jQuery in your app. Another is using QuerySelector or QuerySelectorAll: link: function(scope, element, attrs) { console.log(element[0].querySelector(‘.list-scrollable’)) } We use the first item in the element array, which is the HTML element. element.eq(0) would yield the same. FIDDLE

Directive is being rendered before promise is resolved

March 22, 2023 by Tarik

As stated in an official thread about this issue (quickly closed as “won’t fix because it would make directives wait”), a workaround is to wrap your directive in a ng-if : <div ng-if=”myPromiseParam”> <my-directive param=”myPromiseParam”> </div>

AngularJS. Convert tag value (Unix time to human-readable time)

March 21, 2023 by Tarik

I have faced the issue with unix time formatted as a number of seconds from the epoch start or as a number of milliseconds that is used in JavaScript. So strictly speaking, AngularJS doesn’t convert Unix timestamp to Date, but a number with milliseconds, which is 1000 times larger, so first you will have to … Read more

AngularJS Directive Passing String

March 10, 2023 by Tarik

In your directive, you’re using the bi-directional binding of attributes from the global scope to the directive local scope. In this mode, the attribute value in the html is evaluated as an expression and thus your directive tries to bind its local scope.error to the result of evaluating true as an expression. When you test … Read more

Conditionally adding data-attribute in Angular directive template

March 9, 2023 by Tarik

I think a good way could be to use ng-attr- followed by the expression you want to evaluate. In your case it would be something like: <span ng-attr-data-toggle=”{{ isValueTrue ? ‘toggle’ : ‘notToggle’ }}”></span> Here’s a fiddle with an example.