current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

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!

share|improve this question
    
Please see my new answer. –  Artyom Pranovich Oct 27 '14 at 9:47

2 Answers 2

up vote 2 down vote

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.

share|improve this answer
    
yap I update the codes but it still gives me nothing, could you give me another answer based on my question ? @dfsq –  user3860691 Oct 27 '14 at 9: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 9:30
    
Take a look at this demo: plnkr.co/edit/hlLeclprRrRUF6YYRd2E?p=preview –  dfsq Oct 27 '14 at 9:35
    
and yes the answer is scope.$eval thanks a lot mate ! @dfsq –  user3860691 Oct 27 '14 at 9:47
    
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 9:50
up vote 1 down vote

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.

share|improve this answer
1  
thanks a lot for your response, but I solved it using scope.$eval(attr) ! @artyom –  user3860691 Oct 27 '14 at 9: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 9: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 9:52
    
Yes, $watch is enough if you use select: '@select'. –  dfsq Oct 27 '14 at 9:53
    
well now that you mentioned it I'm wondering what is the difference between $watch and $eval ? @ArtyomPranovich –  user3860691 Oct 27 '14 at 9:56

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.