2

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!

1
  • Please see my new answer. Commented Oct 27, 2014 at 9:47

2 Answers 2

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.

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

4 Comments

yap I update the codes but it still gives me nothing, could you give me another answer based on my question ? @dfsq
It gets you nothing, because $scope.selectBox is undefined. You want your directive to console.log every time you update a selectBox model?
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.
@user3860691 Glad to help. Feel free to accept the answer if helped you.
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.

8 Comments

thanks a lot for your response, but I solved it using scope.$eval(attr) ! @artyom
This is a proper way to handle it. However for some reason OP doesn't want to use isolated scope.
@user3860691 I'm not sure, that using of '$eval' in this case is a good idea. Just enough to use a '$watch'
Yes, $watch is enough if you use select: '@select'.
well now that you mentioned it I'm wondering what is the difference between $watch and $eval ? @ArtyomPranovich
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.