javascript - 如何让 Angular JS 在触发 ng-style 之前等待 $scope 变量被设置

Question

问题摘要：我想使用Angular JS的指令动态地将CSS样式应用于几个div's 。ng-style问题是绑定到的表达式ng-style取决于我用来定义要返回的样式的特定范围变量。但这里有一个问题：这个范围变量最初没有设置。它仅在特定事件处理程序触发后设置，因此我需要ng-style在触发之前等待设置此范围变量。

背景：我正在使用 Angular JS v.1.7.8

我的代码：

<!-- index.html -->
<div ng-app='myApp'>
    <div ng-controller='myCtrl as ctrl'>
        <div ng-style='clientScope.ctrl.getStyle()'></div>
        <div ng-style='clientScope.ctrl.getStyle()'></div>
        <div ng-style='clientScope.ctrl.getStyle()'></div>
        <div ng-style='clientScope.ctrl.getStyle()'></div>
    </div>
</div>

// app.js
(function(){
    'use strict';
    angular
        .module('myApp', [])
        .controller('myCtrl', function($scope) {
            var ctrl = this;

            ctrl.colorInScope = function() {
                if ($scope.colors) { return true; };
                return false;
            }

            ctrl.getStyles = function() {
                return {'color': $scope.colors['myColor'] };
            }

         /* Note I'm not actually using setTimeout() in my real
            setMyColor function, but am just using it here as an
            easy way to simulate to delayed nature of how myColor gets set. */

            function setMyColor() {
                setTimeout(function() {
                    $scope.colors = {};
                    $scope.colors['myColor'] = '#7e9cee';
                }, 3000);
            }

            setMyColor();

        });

}());

目前，ng-style' 的表达式在绑定到加载时立即进行评估div，这发生在setMyColor被调用之前。结果，$scope.colors在ctrl.getStylesisundefined和 Javascript 中抛出了这个错误：

TypeError：无法读取属性“myColor”undefined

到目前为止我已经尝试过：

我看到两种可能的方法来解决这个问题：

1) 防止ng-style' 表达式在$scope.colors["myColor"]设置之前被评估。

注意：我已经研究了两个 Angular JS 指令 (ng-if和ng-show)，它们做了类似的事情，但它们最终没有达到我想要的效果。原因如下：

• ng-if="expression"expression如果计算结果为，则从 DOM 中删除它绑定的false元素，因此该元素仅包含在 DOM 中 如果expressionis true。我尝试像这样附加ng-if="clientScope.ctrl.colorInScope()"到我div的's'：

  <div ng-if="clientScope.ctrl.colorInScope()" ng- 
  style="clientScope.ctrl.getStyle()"></div>
  .
  .
  .
  <div ng-if="clientScope.ctrl.colorInScope()" ng- 
  style="clientScope.ctrl.getStyle()"></div>
  

  但这div会在 DOM 初始加载时立即从 DOM 中删除 's，因为此时clientScope.ctrl.colorInScope不会评估true。

• ng-show="expression"如果评估为，则将样式应用于visibility: hidden其绑定的元素，因此该元素仅在为真时可见。我也尝试附加到我的，但即使我的可见性最初是隐藏的，无论如何还是过早地被评估并且Javascript抛出了一个错误，因为是。expressionfalseexpressionng-show="clientScope.ctrl.colorInScope()"divdivng-style$scope.colorsundefined

2）有某种方法ctrl.getStyles可以暂停函数的执行，直到$scope.colors["myColor"]被设置。注意：我不想在其中使用计时器，ctrl.getStyles因为每次调用该函数都会等待。基本上我希望函数暂停（如果$scope.colors["myColor"]是）undefined（并等待它的值被设置）或者如果$scope.colors["myColor"]有值则立即继续。

我已经阅读了一些关于 的内容$scope.$watch，它基本上是一个 Angular JS 方法，$scope它采用要监视的范围变量的名称和一个事件处理程序，并在范围变量更改时触发事件处理程序。我可能会在我的控制器开始时初始化$scope.colors为0，然后添加await $scope.$watch('colors', myHandler())到ctrl.getStyles = async () => ...并返回{'color': $scope.colors["myColor"]}，myHandler但这不起作用，因为$scope.$watch只会被触发一次（setMyColor完成后）并且Javascript最终会抛出某种超时错误或其他东西，因为它会是永远等待$scope.$watch（尽管我不确定在这种情况下我的程序的行为究竟是什么，因为我仍在学习如何async/await工作）。

我也读过Wait until scope variable is loaded before using it in view in angular.js这有助于展示如何利用ng-show，但它并没有真正回答我关于如何停止的问题ng-style。

结论：

你们中的任何 Angular JS 专家都知道我想要实现的更好的解决方案吗？

标签： javascriptcssangularjsng-style

Answer 1

Javascript 抛出此错误：

TypeError：无法读取未定义的属性“myColor”

为避免类型错误，请检查变量是否存在：

ctrl.getStyles = function() {
    if (!$scope.colors) return;
    //ELSE
    return {'color': $scope.colors['myColor'] };
}

这将避免类型错误。