混合隔离范围和控制器作为语法答案

【问题标题】：mixing isolated scope and controllerAs syntax混合隔离范围和控制器作为语法
【发布时间】：2015-12-01 06:23:16
【问题描述】：

我有一个指令需要一个位于它的父控制器上的变量

<hack-chart-controls counttime="vm.countInMinutes"></hack-chart-controls>

指令：

function hackChartControls($log, $parse) {
    var directive = {
        restriction: 'AE',
        scope: {
            counttime: '='
        },
        templateUrl: '/app/components/hackChartControls.html',
        link: link
    };

    return directive;

基于this answer，我能够看到指令中的变量何时发生变化。

但是，在指令标记中，因为我使用的是 ControllerAs 语法，所以我使用 vm 作为我的范围变量。例如：

<div class="close"><i class="fa fa-close" ng-click="vm.close()"></i></div>

在更改 scope: { counttime: '=' } 之前，这些 ng-click 函数工作得很好，因为它从父级继承了作用域而不隔离作用域。

如何让click 函数再次工作？

【问题讨论】：

这是哪里的ng-click？这是“hackChartControls.html”模板的一部分吗？然后，指令的隔离范围内没有定义vm。相反，只需执行ng-click="close()"

标签： angularjs angularjs-scope

【解决方案1】：

我会引用隔离范围内的操作，或者根本不使用隔离范围。这取决于您首先要使用隔离范围的原因。隔离作用域的目的是封装指令，使其独立于外部作用域。

function hackChartControls($log, $parse) {
    var directive = {
        restriction: 'AE',
        scope: {
            counttime: '=',
            action: '&',
        },
        templateUrl: '/app/components/hackChartControls.html',
        link: link
    };

    return directive;
}

还有你的模板：

<div class="close"><i class="fa fa-close" ng-click="action()"></i></div>

像这样使用它：

<hack-chart-controls counttime="vm.countInMinutes" action="vm.close()"></hack-chart-controls>

【讨论】：