Access to scope in angular directive with two data bindigs

Question

good morning i have a small problem i have directive:

return {
        restrict:'E',
        scope: {
            user: "="
        },
        template: '<b>{{userLogin}}</b>',
        link:function(scope,elem,attrs){
        },
        controller: function ($scope) {
           console.log($scope.user)//always undefindet
            $scope.userLogin = $scope.user;
        },
    };

and i want to show my parameter "user" with scope in template i must use controller because i need download some data from server I think problem is somewhere here(in directive):

scope: {
                user: "=" //when i have this response "undefined"
                user: "@" //when i have this response not show id only text
            },

my HTML

<get-user-login user="{{post.user_id}}"></get-user-login>

i always getting: empty value or undefined in console. How to fix that.

Go through [difference between '@' and '='](http://stackoverflow.com/questions/14050195/what-is-the-difference-between-and-in-directive-scope-in-angularjs?rq=1) — Gangadhar Jannu, Mar 07 '17 at 17:51

score 0 · Answer 1 · answered Mar 07 '17 at 17:37

0

When using @ you have to use interpolation as:

<get-user-login user="{{post.user_id}}"></get-user-login>

Note @ is ONLY for text values

WHEREAS

When using = you do not need interpolation

<get-user-login user="post.user_id"></get-user-login>

Note = is only for passing objects (two way binded)

answered Mar 07 '17 at 17:37

Rahul Arora

4,503
1
16
24

still undefined – Kaker Mar 07 '17 at 17:39
please paste your controller code where the value you are passing to the directive is defined. – Rahul Arora Mar 07 '17 at 17:41
– Kaker Mar 07 '17 at 17:48
what is getPost() method doing, can you please paste your controller code? – Rahul Arora Mar 07 '17 at 17:50
controller: $scope.getPost = function () { $http({ url: '...', method: 'POST', data: data }).then(function (res) { console.log(res.data.post); $scope.onePost = res.data.post; }) } – Kaker Mar 07 '17 at 17:50
where is your post object defined in the controller? I still cannot see that – Rahul Arora Mar 07 '17 at 17:52

score 0 · Answer 2 · answered Mar 07 '17 at 17:48

I built this demo for you and it works just fine :

<!DOCTYPE html>
    <html lang="en" ng-app="app">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body ng-controller="ctrl">

        <get-user-login  user="post.user_id"></get-user-login >
        <script> 

        angular.module("app",[])
             angular.module("app").
             controller("ctrl",function($scope){
                $scope.post = {user_id:565};
             }).
             directive('getUserLogin', function() {
                 return {
                    restrict:'E',
                    scope: {
                        user: "="
                    },
                    template: '<b>{{userLogin}}</b>',
                    link:function(scope,elem,attrs){
                    },
                    controller: function ($scope) {
                    console.log($scope.user)//always undefindet

                        $scope.userLogin = $scope.user;
                    },
                };
             });
        </script>
    </body>
    </html>

score 0 · Answer 3 · answered Mar 07 '17 at 18:39

0

Are you sure that you're giving correct value to directive? Because in getPost you're binding it to $scope.onePost, so maybe correct way is:

<get-user-login user="{{onePost.user_id}}"></get-user-login>

answered Mar 07 '17 at 18:39

Kamil Zieliński

1
1

Access to scope in angular directive with two data bindigs

3 Answers3