Angularjs自定义指令不改变DOM答案

【问题标题】：Angularjs Custom Directive not changing DOMAngularjs自定义指令不改变DOM
【发布时间】：2019-10-11 09:42:21
【问题描述】：

在 Angularjs 指令中使用 ng-if

我有一个可以订阅的showTaskDetailView$ 流，我可以通过它推送一个布尔值。

angular.module('Project').directive('something', () => {
    return {
        restrict: 'E',
        template: '<div>something: {{toggleValue}}</div>',
        replace: true,
        link() {
            something();
            function something() {
                showTaskDetailView$.subscribe(value => {
                    let toggleValue = value;
                    console.log(toggleValue);
                });
            }
        }
    };
});

当我运行此指令并更改 showTaskDetailView$ 值时，我会在我的 console.log 中看到新值。但是 DOM 中什么也没有发生。

【问题讨论】：

因为toggleValue 是subscribe 回调上下文中的局部变量。
好吧，这是有道理的。有什么建议可以让toggleValue 在订阅之外可用吗？
使用带有控制器的组件。见AngularJS Developer Guide - components。
我看到您有 29 个 Angular 2+ 问题。您是否有可能尝试解决 Angular 2+ 问题？您问题中的示例是 AngularJS。 AngularJS 指令和组件不适用于 Angular 2+。

标签： angularjs angularjs-directive angularjs-components

【解决方案1】：

您的toggleValue 是一个局部变量，未绑定到$scope。要更新 DOM，您需要在 $scope 上添加 toggelValue。

将您的链接功能更改为：

link(scope) {
        something();
        function something() {
            showTaskDetailView$.subscribe(value => {
                scope.toggleValue = value; <-------------
                console.log(scope.toggleValue);
            });
        }
    }

现在您应该会看到更新后的 DOM。阅读更多here：

【讨论】：