Set angularjs directive attribute from a controller

Question

I'm using the Angular Bootstrap typehead directive, which can be configured from HTML like so:

<div ng-controller="search">
  <input typeahead-focus-first="false" />
</div>

Is it possible to set the 'typeahead-focus-first' attribute from the ng-controller instead?

Joe Enzminger · Accepted Answer · 2015-02-12 00:09:26Z

2

If your controller scope has a property

$scope.typeahead = true;

then

<div ng-controller="search">
  <input ng-if="typeahead" typeahead-focus-first="false" />
  <input ng-if="!typeahead" />
</div>

or

<div ng-controller="search">
  <input typeahead-focus-first="typeahead" />
</div>

The second method requires your typeahead directive to be able to parse the typeahead expression. There are several ways to accomplish this (isolated scope or $parse for example). The typeahead directive in angular bootstrap does this for you, so the second method should work.

EDIT: As a directive

.directive('search', function() {
    return {
        restrict: 'E',
        template: '<div><input typeahead-focus-first="false" /></div>',
        scope: true,
        controller: function($scope) {
        },
        link: function(scope, element, attrs) {
            //this is where you want to do your DOM manipulation (if any)
        }
    };
})

Usage:

<search></search>

edited Feb 12, 2015 at 0:09

answered Feb 11, 2015 at 23:40

Joe Enzminger

11.2k3 gold badges54 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kohjah Breese Over a year ago

Thanks for the input. But I was looking for a solution where this can be set from JS and not mentioned at all in the HTML; as I have several typeheads and all have this setting, defining it each time is clutter.

Joe Enzminger Over a year ago

As a general best practice in angular, you shouldn't be manipulating the DOM in your controllers. The option you are looking for is probably the creation of a custom directive.

ntrp · Accepted Answer · 2015-02-11 23:58:55Z

1

the typeahead property is evalued from attr with this expression:

var focusFirst = originalScope.$eval(attrs.typeaheadFocusFirst) !== false;

so you should set a variable in your scope

$scope.typeahead = true;

and then

<div ng-controller="search">
    <input typeahead-focus-first="{{typeahead}}" />
</div>

Typeahead source here.

EDIT: As has emerged from the comments seems you want to edit the behaviour from the controller without writing anything on the dom. Unfortunately I think this is not possible because the variable governing that behaviour is saved inside the closure at compile time and is not modificable after the component has been linked. You need to recompile the component to change that behaviour with, for example an ng-if.

edited Feb 11, 2015 at 23:58

answered Feb 11, 2015 at 23:44

ntrp

4015 silver badges13 bronze badges

2 Comments

Joe Enzminger Over a year ago

I don't think $eval works with {{}}. scope.$eval is equivalent to $parse(expression)(scope).

ntrp Over a year ago

It works but only during the first linking phase, the typeahead will be set to either true or false depending on the scope value while the component is being compiled. It will not be two way binded.

Collectives™ on Stack Overflow

Set angularjs directive attribute from a controller

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related