current community

your communities

more stack exchange communities

Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free.
up vote 1 down vote favorite
1

so I did a little experiment based on my project

I create 2 directive, one using isolated scope and the other one is not..

the question are :

  1. is there a way to get scope attribute without using isolated scope ? because in my project I didn't have an isolated scope for the custom directive environment and also I need to access the parent scope

  2. could I manipulate the dom using angular.element('#' + scope.id) ? if not is there a way to do this ?

this is the unisolated custom directive

<test-directive item="item" content="item.context"></test-directive>

this is the js codes

app.directive('testDirective', function() {
  return {
    restrict: "EA",
    scope: false,
    template:"<div>test directive</div>",
    link: function(scope, elm, attr) {
      console.log(attr.item); //I want it like the result gives in line 39
      console.log(attr.id); //I want it like the result gives in line 41
      console.log(attr.content); //I want it like the result gives in line 43
      console.log(scope.name);
    }
  }
});

this is the isolated one

<isolated-directive id=item.id item="item" content="item.context"></isolated-directive>

this is the js codes

app.directive('isolatedDirective', function() {
  return {
    restrict: "EA",
    scope:{
      item:'=item',
      id:'=id',
      content:'=content',
    },
    template:"<div>isolated directive</div>",
    link:function(scope,elm,attr) {
      console.log(scope.item.id);
      console.log(scope.id);
      console.log(scope.content);
      console.log(scope.name); //I want it like the result gives in line 27
    }
  }
});

and this is the working plunkr

anyone care to help?

share|improve this question

2 Answers 2

up vote 0 down vote

You can use scope: true and the scope will prototypically inherit from the location it is inserted. However, if all you need is access to the parent scope, you can always use $parent, even in an isolated scope. It is not recommended, but it is possible.

share|improve this answer
    
could you give me an updated plunkr work example ? –  user3860691 Dec 30 '14 at 11:24
    
jsfiddle.net/wchnsyLw/1 –  unobf Dec 30 '14 at 13:07
    
wow apparently without using scope:true I could use it also, thanks for your reply.. btw what if I want to manipulate the element? like using this angular.element('#' + scope.item.id); is that possible ? @unobf –  user3860691 Dec 30 '14 at 13:17
up vote 0 down vote

Q1:

app.directive('testDirective', function() {
    return {
        restrict: "EA",
        scope: false,
        template:"<div>test directive</div>",
        link: function(scope, elm, attr) {
            console.log(scope[attr.item]); //I want it like the result gives in line 39
            console.log(scope[attr.id]); //I want it like the result gives in line 41
            console.log(scope[attr.content]); //I want it like the result gives in line 43
            console.log(scope.name);
        }
    }
});

Q2:

basically the parm elm in link function is your directive related DOM. if you really want the scope.item.id in your DOM attribute, use ng-attr to define your attributes like below. note that angular.element is just used to wrap a DOM to JQuery element but not used for DOM finding.

<isolated-directive ng-attr-id="{{item.id}}" item="item" content="item.context"></isolated-directive>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.