使用共享变量从指令中引入控制器 UI 更改

Question

所以我有一个控制器，它 hides/shows 是其基于值的模板的一部分，我们可以这样说：
<div ng-show="isSelected"></div>

...
$scope.isSelected = true;
...

非常标准的东西，是吧？

现在，我有一个指令要传递这个标志：
<my-directive select="isSelected"></mydirective>

在这个指令中，我把它绑定成这样：

...
// Angular 1.4 syntax here mind you
bindToController: {
    select: '=',
}
...

所以在我的指令的控制器中，我在某个时候更改了这个标志，我希望它一直传播到应该改变的父控制器 UI。
我在 DevTools 中手动检查控制器上的值已被指令更改 - 这样很好。
但我不知道如何导致 UI 刷新。感觉应该在 $watch() 或 $apply() 中，但我不知道是否应该放这样的东西以及放在哪里。

我迄今为止使用的替代解决方案是将函数从控制器传递到我的指令，该指令在被调用后更改此值 - 有效，但感觉设计不佳，因为它或多或少会导致相同的功能必须每次我想使用指令时添加：/
任何提示当然将不胜感激。

Answer 1

以下代码显示了您要实现的目标的示例

HTML

<div ng-app="myApp">
    <div ng-controller="myCtrlr">
        <div ng-show="isSelected">If I disappear, the directive is responsible.</div>
        <my-directive select="isSelected"></my-directive>
    </div>
</div>

Javascript

angular.module('myApp', [])
    .controller('myCtrlr', function ($scope) {
        $scope.isSelected = true;
    })
    .directive('myDirective', ['$timeout', function ($timeout) {
        return {
            controller: function () {
                var ctrl = this;
                // the $timeout is just to put the delay in
                $timeout(function () {
                    ctrl.select = false;
                }, 2000)
            },
            controllerAs: 'ctrl',
            bindToController: true,
            scope: {
                select: '=',
            }
        }
    }])

myCtrlr 作用域变量 select 的值是从指令中修改的（这里它是在延迟后完成的，但它可以从类似 UI 的动作中触发）

使用共享变量从指令中引入控制器 UI 更改

Induce controller UI change from within directive with shared variable

angularjs

angularjs-directive

angularjs-controller