11

I'm refactoring some angular directives to angular 1.5-style components.

Some of my directives have behavior that depends on a certain attribute being present, so without the attribute having a specific boolean value. With my directives, I accomplish this using the link function:

link: function(scope,elem,attrs, controller){
      controller.sortable = attrs.hasOwnProperty('sortable');
    },

How would I do this with the angular 1.5-style component syntax?

One thing I could do is add a binding, but then I'd need to specify the boolean value. I'd like to keep my templates as-is.

1
  • 1
    Inject $attrs into your controller. Commented May 25, 2016 at 13:39

3 Answers 3

11

Use bindings instead of the direct reference to the DOM attribute:

angular.module('example').component('exampleComponent', {
  bindings: {
    sortable: '<'
  },
  controller: function() {
    var vm = this;
    var isSortable = vm.sortable;
  },
  templateUrl: 'your-template.html'
});

Template:

<example-component sortable="true"></example-component>

Using a one-way-binding (indicated by the '<') the value of the variable 'sortable' on the controller instance (named vm for view model here) will be a boolean true if set as shown in the example. If your sortable attribute currently contains a string in your template an '@' binding may be a suitable choice as well. The value of vm.sortable would be a string (or undefined if the attribute is not defined on the component markup) in that case as well.

Checking for the mere presence of the sortable attribute works like this:

bindings: { sortable: '@' }

// within the controller:
var isSortable = vm.sortable !== undefined;
Sign up to request clarification or add additional context in comments.

Comments

4

Using bindings may work but not if you are trying to check for the existence of an attribute without value. If you don't care about the value you can just check for it's existence injecting the $element on the controller.

angular
    .module('yourModule')
    .component('yourComponent', {
        templateUrl: 'your-component.component.html',
        controller: yourComponentsController
    });

function yourComponentController($element) {
    var sortable = $element[0].hasAttribute("sortable");
}

Comments

1

There is a built-in way to do this by injecting $attrs into the controller.

JS

function MyComponentController($attrs) {

    this.$onInit = function $onInit() {
        this.sortable = !!$attrs.$attr.hasOwnProperty("sortable");
    }

}

angular
    .module("myApp", [])
    .component("myComponent", {
        controller: [
            "$attrs",
            MyComponentController
        ],
        template: "Sortable is {{ ::$ctrl.sortable }}"
    });

HTML

<my-component sortable>

</my-component>

<my-component>

</my-component>

Example

JSFiddle

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.