AngularJS : directive scope

Question

I am trying to set variable in the directive's scope:

HTML:

<div personalize-product>
        Owned: {{ isOwned }}    
</div>

Coffee:

angular.module('yoApp').directive 'personalizeProduct', ->
    restrict: 'A'
    link: (scope, el, attrs) ->
        scope.isOwned = 'maybe'

however it does not work. I'm clearly missing something, but I cannot find an answer in angular docs.

EDIT: I should have mentioned - I don't want to pass isOwned to directive, I want the directive to be responsible for setting it.

I want to use it across the site.

acid
– acid

2014-05-12 14:59:51 +00:00
Commented May 12, 2014 at 14:59 — acid
– acid, Commented May 12, 2014 at 14:59

Sten Muchow · Accepted Answer · 2014-05-12 16:48:38Z

2

Here is the working code:

HTML:

  <body ng-app="yoApp">
    <div personalize-product product-id="6">
    </div>

    <div personalize-product product-id="8">
    </div>
  </body>

JS:

angular.module('yoApp', [])
  .directive('personalizeProduct', function() {
    return {
      restrict: 'A',
      scope: {},
      link: function(scope, el, attrs) {
        scope.isOwned = attrs.productId;
      },
      template: '<div>{{isOwned}}</div>'
    }
  })

edited May 12, 2014 at 16:48

answered May 12, 2014 at 14:06

Sten Muchow

6,7314 gold badges38 silver badges46 bronze badges

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

7 Comments

acid Over a year ago

But ultimately I want to pass for example a productId to the directive and set isOwned per productId so I don't want to set it on a global scope and I think you're doing it in your example.

Sten Muchow Over a year ago

no global scope, this is only the scope you are giving the directive -> $rootScope = global scope

Sten Muchow Over a year ago

Then is sounds like you need an isolate scope directive so you can have multiple implementations of the directive

acid Over a year ago

How can I make one? I'm not really an angular expert. :)

acid Over a year ago

I'm working on something like that: plnkr.co/edit/AUEe3TRKXgsluc5dhPV0?p=preview

|

Sebastian · Accepted Answer · 2014-05-12 14:30:02Z

0

There are a couple of flaws in your code.

First you can populate the scope of your directive by using attributes:

<div personalize-product is-owned="isOwned">

Second, in your directive you need to declare the bindings (you can use different types of bindings - take a look at the docs for details):

angular.module('yoApp').directive 'personalizeProduct', ->
  restrict: 'A'
  scope: { isOwned: '=' }
  controller: (scope) ->
    scope.isOwned = 'maybe'

Update (based on the comments added)

If you just want to have an isolated scope for your directive (but not passing anything from the parent scope) declare an empty object for scope:

scope: { }

edited May 12, 2014 at 14:30

answered May 12, 2014 at 13:51

Sebastian

17.6k5 gold badges51 silver badges57 bronze badges

3 Comments

acid Over a year ago

The reason I structured that code is because I don't want to pass isOwned to directive itself. Instead I want the directive to be responsible for setting it.

Sebastian Over a year ago

@acid try to define an empty isolated scope (see update)

acid Over a year ago

Could you provide a simple jsfiddle or something because it does not work in my code?

christang · Accepted Answer · 2014-05-12 14:35:12Z

0

If you are creating a module to hold your directive, you need to specify its dependencies, which are none (note the new Array).

angular.module('yoApp', []).directive 'personalizeProduct', ->
    restrict: 'A'
    link: ($scope) ->
        $scope.isOwned = 'maybe'

Plunker.

See Creation vs Retrieval in Developer Guide / Modules.

edited May 12, 2014 at 14:35

answered May 12, 2014 at 14:28

christang

5336 silver badges15 bronze badges

4 Comments

acid Over a year ago

I didn't include app definition but it's there. :) Also - your code is not working.

christang Over a year ago

oops, plunker saved to a different state. how about now?

acid Over a year ago

it works but the scope is global and as I said in one of the comments, I want to pass a productId to directive so I need isolate scope. Here is my code (not working): plnkr.co/edit/AUEe3TRKXgsluc5dhPV0?p=preview

christang Over a year ago

you need to keep track of all of the scopes carefully. once you introduce an isolate scope, there will be an isOwned in the scopes of your transcluded elements, and one isOwned in the scopes of each of the isolates. To modify the value of the value of isOwned in the transcluded elements, you need to use the transclude function; check this plunker: plnkr.co/edit/lguVkVbO53IELXKFsM96?p=preview

Collectives™ on Stack Overflow

AngularJS : directive scope

3 Answers 3

7 Comments

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related