Question

我只是尝试更新$ scope.myclick函数中的$ scope.selectedIndex值，但范围值未更改。我是自定义指令的初学者，我没有想法解决这个问题。

<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;       
    }
});

Answer 1

data-selected-index属性应该是kebab-case，而不是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>

隔离范围：$范围值不更新

1 个答案: