Question

指令代码

app.directive('uiSwitch', function() {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: '_lib/custom/ui-switch/ui-switch-template.html', // markup for template
        scope: {
                info: '='
        },
        link: function(scope, el, attrs){

            el.click(function(){
                // How do I change the controller data here?
            });

        }
    };
});

指令模板代码：

<button class="switch-container" ng-click="info.callback()" ng-class="{off: info.off}">
        <div class="switch-inner">
        <div class="option option-on">{{info.labels[0]}}</div>
        <div class="switch"></div>
        <div class="option option-off">{{info.labels[1]}}</div>
    </div>
    <div class="shadow"></div>
</button>

我如何从我的控制器模板中调用该指令：

<ui-switch info="switch"></ui-switch>

我控制器中的相关代码：

    $scope.switch = {
        labels: ['Friend', 'Foe'],
        callback: function(){
            c('switch clicked')
        }
    }

我想在点击开关时更新控制器上的某些属性，例如。 $scope.switch.isOff = false。但是，我不知道如何从指令的link()函数中更新控制器的数据。

Answer 1

link函数已传入scope作为函数的第一个参数。如果您的数据位于同一scope，请通过以下方式访问：

link: function(scope, el, attrs){
    el.click(function(){
         scope.switch.isOff = false;
    })
}

值得注意的是el.click不会触发$digest周期 - 因此您的数据更改不会反映在视图中，直到周期发生。您可以强制使用$timeout或$apply（谨防$apply()潜在问题）

使用AngularJS指令修改控制器数据

1 个答案: