CODEWITHSUNDEEP
angularjsangularjs-directive
sanman
sanman

Reputation: 780

Isolate scope : $scope value not updating

I just tried to updated my $scope.selectedIndex value in $scope.myclick function but the scope value not changed. I am beginner for custom directive i dont have idea to solve this issue.

<div class="doc-list-wrapper" data-docs="docs"
     data-selectedIndex="selectedIndex"
     myclick="myclick(id)">
</div>

app.directive('docListWrapper', ['$timeout', function ($timeout) {
        return {
            restrict: 'AEC',            
            priority: 500,
            replace: true,
            templateUrl: 'tmpl-doc-list-wrapper',
            scope: { docs: '=docs',
                     selectedIndex: '=selectedIndex',           
                     myclick: '&'
                   },
            link: function (scope, element, attrs, ctrl) {

            }
        };
    }])

app.controller('ctrler', function ($scope, $interval) {
    $scope.docs = [{"doc":"http://google.com","stageName":"sample1"},
                        {"doc":"http://google.com","stageName":"sample2"},
                        {"doc":"http://google.com","stageName":"sample3"},
                        {"doc":"http://google.com","stageName":"sample4"},
                        {"doc":"http://google.com","stageName":"sample5"},
                        {"doc":"http://google.com","stageName":"sample6"},
                        {"doc":"http://google.com","stageName":"sample7"},
                        {"doc":"http://google.com","stageName":"sample8"}];

    $scope.selectedIndex =3;

    $scope.myclick = function(curId){
        console.log(curId)    //I got expected curId when clicked but the scope value not updating
        $scope.selectedIndex = curId;       
    }
});

Upvotes: 0

Views: 56

Answers (1)

georgeawg
georgeawg

Reputation: 48948

The data-selected-index attribute should be in kebab-case, not camelCase:

<!-- REPLACE 
<div class="doc-list-wrapper" data-docs="docs"
     data-selectedIndex="selectedIndex"
     myclick="myclick(id)">
</div>
-->

<!-- use kebab-case for attributes -->
<div class="doc-list-wrapper" data-docs="docs"
     data-selected-index="selectedIndex"
     myclick="myclick(id)">
</div>

Upvotes: 1

Related Questions