get attribute object without using isolated scope angularjs custom directive

Question

let say that I have this custom directive

<div ng-controller="MyCtrl">
    <select ng-model="selectBox">
         <option value="test">test</option>
    </select>

    <my-directive select="selectBox"></my-directive>
</div>

myApp.directive('myDirective', function () {
    return {
        restrict:'EA',
        function (scope, element, attr) {
           var atrib = scope.$eval(attr.select)

           console.log(atrib);
    }
   }
});

whenever I execute the console.log command it returned with undefined value. I heard about isolated scope. But for this environment I don't want to use isolated scope..

the question is how can I achieve these ?

UPDATE I update the question based on @dfsq answer but it still got nothing

UPDATE apparently if I wrapped the attr.select using scope.$eval and change the attribute from {{}} which is object wrapping I use string only it will work! thank you so much for your answer guys!

Please see my new answer. – Artyom Pranovich Oct 27 '14 at 09:47 — Artyom Pranovich, Oct 27 '14 at 09:47

score 2 · Answer 1 · answered Oct 27 '14 at 09:13

2

Not sure how you even get any console log output. It's not possible with the way you are defining your directive. You are using directive as an element, however its definition states it to be used as an attribute. Change it to this:

myApp.directive('myDirective', function() {
    return {
        restrict: 'E',
        link: function(scope, element, attr) {
            var atrib = attr.select;
            console.log(atrib);
        }
    }
});

Again, you need to declare resrict property as E "element". If you omit it (happens if you just provide a link function) it's A "attribute" be default.

answered Oct 27 '14 at 09:13

dfsq

191,768
25
236
258

yap I update the codes but it still gives me nothing, could you give me another answer based on my question ? @dfsq – Eka Rudianto Oct 27 '14 at 09:26
It gets you nothing, because `$scope.selectBox` is undefined. You want your directive to console.log every time you update a `selectBox` model? – dfsq Oct 27 '14 at 09:30
1

Yes, you have to use `$eval` if you don't want to use isolated scope. Otherwise the solution would be cleaner, as provided by @Artyom Pranovich. – dfsq Oct 27 '14 at 09:50
@user3860691 Glad to help. Feel free to accept the answer if helped you. – dfsq Oct 27 '14 at 09:59

score 1 · Answer 2 · answered Oct 27 '14 at 09:46

1

If you want to see new value in your console after every option change in select, you can do it by the following way.

<div ng-controller="MyCtrl">
    <select ng-model="selectBox" ng-options="item for item in items"></select>
    <my-directive select="{{selectBox}}"></my-directive>
</div>

JS code:

myApp.directive('myDirective', function () {
    return {
        restrict:'E',
        scope: {
            select: '@select'
        },
        link: function (scope, element, attr) {
           scope.$watch('select', function(newValue){
               console.log(attr.select); //changed every time after a new select
           });
    }
   }
});

function MyCtrl($scope) {
    $scope.items = ['test1', 'test2', 'test3'];
    $scope.selectBox = $scope.items[0]; //default select's value
}

I've attached JSFiddle example for you.

answered Oct 27 '14 at 09:46

Artyom Pranovich

6,814
8
41
60

1

thanks a lot for your response, but I solved it using scope.$eval(attr) ! @artyom – Eka Rudianto Oct 27 '14 at 09:50
This is a proper way to handle it. However for some reason OP doesn't want to use isolated scope. – dfsq Oct 27 '14 at 09:52
@user3860691 I'm not sure, that using of '$eval' in this case is a good idea. Just enough to use a '$watch' – Artyom Pranovich Oct 27 '14 at 09:52
Yes, $watch is enough if you use `select: '@select'`. – dfsq Oct 27 '14 at 09:53
well now that you mentioned it I'm wondering what is the difference between $watch and $eval ? @ArtyomPranovich – Eka Rudianto Oct 27 '14 at 09:56
Interestin question. I don't think $watch evaluates expression directly. Need to look at implementation though. – dfsq Oct 27 '14 at 10:02
@user3860691, $eval don't evaluate JavaScript code, it evaluate AngularJS expressions between {{ }} braces. If you don't use the $eval function in the 'dfsq' plunker, so attr.select returns just the name of model: it will be 'selectBox' (because you don't evaluate angular expression). – Artyom Pranovich Oct 27 '14 at 10:08
@user3860691 about $watch you should to look through this post: http://stackoverflow.com/questions/15112584/using-scope-watch-and-scope-apply – Artyom Pranovich Oct 27 '14 at 10:11

get attribute object without using isolated scope angularjs custom directive

2 Answers2