AngularJs: create directive

Question

I've a question about a directive I want to write. Here is the jsfiddle This is the HTML

<div ng-controller="TestCtrl">
    <mydir base="{{absolute}}">
        <div>{{path1}}</div>
        <div>{{path2}}</div>
    </mydir>
</div>

The directive, called 'mydir', will need the value of the base attribute and all the path values (there can be any number of paths defined). I don't want to inject values from the controller directly into the directive scope (they need to be independent). I have 3 questions about this (checkout the jsfiddle too!)

1) although the code works as it is now, there is an error: "TypeError: Object # has no method 'setAttribute'". Any suggestions what is wrong?

2) in the directive scope.base is 'undefined' instead of '/base/'. Can this be fixed.

3) How can I make a list of all the path values in the directive ?

You don't need the {{}} around absolute in the base attribute. — m.e.conroy
– m.e.conroy, Commented Sep 17, 2013 at 13:01
forgot to add, don't need the brackets if you use '=' in the scope — m.e.conroy
– m.e.conroy, Commented Sep 17, 2013 at 13:08

Nikos Paraskevopoulos · Accepted Answer · 2013-09-17 13:38:16Z

2

You need to set an isolate scope that declares the base attribute for this directive:

scope: {
    base: "@"
}

This solves (2).

Problem (1) is caused from the replace: true in cooperation with the scope above, because it creates a comment node to contain the repeated <div>s.

For (3), add paths: "=" to scope and, of ocurse, pass them from the parent controller as an array.

See forked fiddle: http://jsfiddle.net/swYAZ/1/

edited Sep 17, 2013 at 13:38

answered Sep 17, 2013 at 12:48

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

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

6 Comments

Jeanluca Scaljeri Over a year ago

thnx, thats exactly what I need! Is there a solution for question 3 though ?

Nikos Paraskevopoulos Over a year ago

Could you explain (3) a little?

Jeanluca Scaljeri Over a year ago

Inside the <mydir> element I can define one or more paths. Inside the directive I want to loop through all the children of <mydir> and make a list of all the paths values

Jeanluca Scaljeri Over a year ago

what you suggest for 3) is probably a good solution. But I was looking for a solution in which you could actually access these dom elements and extract the content/path. Is that somehow possible ?

Nikos Paraskevopoulos Over a year ago

I did not realize that; but would that really be more convenient? (Is the inner content server generated?) I think it is better to go Javascript all the way than half-enhancing HTML.

|

m.e.conroy · Accepted Answer · 2013-09-17 13:14:22Z

You're creating an new scope in your directive by setting scope: true what you want to do is:

app.directive('mydir', function ($compile, $rootScope) {
    return {
        replace: true,
        restrict: 'E',
        template: '<div ng-repeat="p in paths"> {{base}}{{p}}/{{$index}}</div>',
        scope: {
            base : '='
        },

        link: function (scope, iElement, iAttrs) {
            scope.paths = ['p1', 'p2'] ;
        }
    }
});

This will setup a bi-directional binding between your directive's local scope and the parent's scope. If the value changes in the parent controller it will change in the directive as well.

http://jsfiddle.net/4LAjf/8/

lastboy · Accepted Answer · 2013-09-17 13:37:41Z

1

If you want to make a robust directive to be able to replace the data to its content (3) You can pass a reference as an attribute and display the data accordingly.

See this article, look for wrapper widget.

answered Sep 17, 2013 at 13:37

lastboy

5764 silver badges12 bronze badges

Collectives™ on Stack Overflow

AngularJs: create directive

3 Answers 3

6 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Related