Fatal编程技术网
  • javascript/
  • Javascript 如何使Angular JS在触发ng样式之前等待设置$scope变量

Javascript 如何使Angular JS在触发ng样式之前等待设置$scope变量

javascript css angularjs

Javascript 如何使Angular JS在触发ng样式之前等待设置$scope变量,javascript,css,angularjs,ng-style,Javascript,Css,Angularjs,Ng Style,问题摘要：我想使用Angular JS动态地将CSS样式应用于几个div sng样式指令。问题是绑定到ng style的表达式取决于我用来定义要返回的样式的特定范围变量。但问题是：这个范围变量最初并没有设置。它仅在特定事件处理程序触发后设置，因此我需要使ng style等待在触发之前设置此范围变量 背景：我正在使用Angular JS v.1.7.8 我的代码： <!-- index.html --> <div ng-app='myApp'> <div ng

问题摘要：我想使用Angular JS动态地将CSS样式应用于几个
div
s
ng样式
指令。问题是绑定到
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>
目前，
ng style
的表达式在绑定到加载的
div
上时立即进行求值，这发生在调用
setMyColor
之前。因此，
ctrl.getStyles
中的
$scope.colors
是
未定义的
，Javascript会抛出以下错误：

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

到目前为止我所尝试的：

<!-- 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>
我认为有两种可能的解决方法：

1） 在设置
$scope.colors[“myColor”]
之前，防止对
ng style
的表达式求值

注意：我已经研究了两个执行类似操作的Angular JS指令（
ng if
和
ng show
），但它们最终没有达到我想要的效果。原因如下：

  • ng if=“expression”
    如果
    expression
    的计算结果为
    false
    ，则从DOM中删除绑定到的元素， 因此，只有当
    表达式
    为
    真
    时，元素才会包含在DOM中。我尝试将
    ng if=“clientScope.ctrl.colorInScope（）”
    附加到我的
    div
    ，如下所示：

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

    
.
.
.
    但这会在DOM初始加载时立即从DOM中删除
    div
    ，因为
    clientScope.ctrl.colorInScope
    此时的计算结果不是
    true

  • ng show=“expression”
    如果
    expression
    求值为
    false
    ，则将
    visibility:hidden
    样式应用于它绑定到的元素，因此只有
    expression
    为true时元素才可见。我还尝试将
    ng show=“clientScope.ctrl.colorInScope（）”
    附加到我的
    div
    ，但尽管我的
    div
    的可见性最初是隐藏的，但
    ng样式的评估还是过早的，Javascript抛出了一个错误，因为
    $scope.colors
    未定义
2） 在
ctrl.getStyles
中使用某种方法暂停函数的执行，直到设置了
$scope.colors[“myColor”]
。注意：我不想在
ctrl.getStyles
中使用计时器，因为这样函数每次调用时都会等待。基本上我想要这个函数 如果
$scope.colors[“myColor”]
未定义（并等待其值被设置），则暂停；如果
$scope.colors[“myColor”]
有值，则立即继续

我读了一点关于
$scope.$watch
，它基本上是
$scope
的一种角度JS方法，它使用要监视的范围变量和事件处理程序的名称，并在范围变量更改时触发事件处理程序。我可以在控制器的开头将
$scope.colors
初始化为
0
，然后将
wait$scope.$watch（'colors'，myHandler（））
添加到
ctrl.getStyles=async（）=>…
并返回
{'color'：$scope.colors[“myColor”]}
myHandler
中的
，但这不起作用，因为
$scope.$watch
只会触发一次（在
setMyColor
完成后），Javascript最终会抛出某种超时错误或其他东西，因为它将永远等待
$scope.$watch
（虽然我不确定在这种情况下我的程序的行为会是什么，因为我仍在学习
async/await
如何工作）

我也读过这本书，它有助于展示如何利用
ng show
，但它并没有真正回答我关于如何暂停
ng风格的问题

结论：


<!-- 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>


你们当中有谁知道我想要实现的目标有更好的解决方案吗

Javascript抛出以下错误：

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

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


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



这将避免类型错误。
这不起作用，因为$scope.$watch只会触发一次
我不认为这是真的。$scope.watch在变量上创建了一个观察程序，当它在每个摘要周期更改时会被触发。为什么不能使用它来解决此问题？如果它随时间更新多个值，则需要be轮询，然后将更新推送到所监视的变量。但是如果您只是等待它准备就绪（1次事件），那么这应该可以正常工作。@有些人不使用
$scope.$watch
仅在
颜色
更改时触发？在这种情况下，
颜色
只会更改一次（当
setMyColor
终止时）。是的，它只会在颜色更改时触发。如果
colors
预计会随着时间的推移更改不止一次，那么您也需要一些机制来获取更新的颜色。然后您可以简单地更新颜色，$scope.watch每次都会触发，样式将被重新评估。@someguy它将适用于第一个
div
但其余的则不是，因为
$scope.$watch
在以后调用
ctrl.getStyles
时永远不会触发（因为
颜色
只更改了一次，再也不会更改）。我建议的方法是使用
颜色
是