Search code examples
angularjsangular-directive

How do you pass in data to custom directives as a value of the attribute itself?


I have a directive defined as such:

angular.module("main.directives").directive("todo", function() {

   return {
      restrict: "A",
      scope: {
         todo: "=entity"
      },
      replace: false,
      templateUrl: "todo.html",
      link: function(scope, element, attributes) {       
      }
   };
});

which I use like this from templates:

<div todo entity="todoData"></div>

todoData comes from a controller or some other the local scope. Anyway it all works like a charm, so that's cool!

My question is the following: How do I have to modify the directive definition so that it also works with a markup of this type:

<div todo="todoData"></div>

As you can see the data is now passed in as the value of the attribute marking the directive. Just like ng- directives do:

<p ng-repeat="bit in data"></p>
<p ng-click="whatever()"></p> 

How can that be achieved?

Thanks


Solution

  • Replace

    scope: {
        todo: "=entity"
    },
    

    by

    scope: {
        todo: "=todo"
    },
    

    or simply

    scope: {
        todo: "="
    },