Fatal编程技术网
  • javascript/
  • Javascript ng类绑定到子范围中的不同变量，而不是指定的变量

Javascript ng类绑定到子范围中的不同变量，而不是指定的变量

javascript html css angularjs

Javascript ng类绑定到子范围中的不同变量，而不是指定的变量,javascript,html,css,angularjs,Javascript,Html,Css,Angularjs,我有一个父范围和一个子范围，每个都有带有ng class=“some class:boolean”的标记。在单击函数中将子范围变量设置为“true”。父项在.$on函数中设置为“true”。触发.$on时，变量会按预期设置为“true”，但不会将类名应用于标记 真正奇怪的是，当子范围的变量设置为true时，它会将正确的类应用于这两个元素。变量和类的名称完全不同 我做错了什么 控制器 var app = angular.module('profileApp', []); app.cont

我有一个父范围和一个子范围，每个都有带有ng class=“some class:boolean”的标记。在单击函数中将子范围变量设置为“true”。父项在.$on函数中设置为“true”。触发.$on时，变量会按预期设置为“true”，但不会将类名应用于标记

真正奇怪的是，当子范围的变量设置为true时，它会将正确的类应用于这两个元素。变量和类的名称完全不同

我做错了什么

控制器

var app = angular.module('profileApp', []);

    app.controller('ProfileController', ['$scope', function($scope){
    $scope.contentVisible = false;
    $scope.$on('animationEnd', function(){
        $scope.contentVisible = true;
    });
}]);

//DIRECTIVES
app.directive('introSection', function(){
return {
    restrict: 'E',
    templateUrl: 'templates/intro-section.html',
    controller: function($scope){
        $('#cityOutline svg').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
            $scope.$emit('animationEnd');
        });
     }
  }
});
app.directive('experienceSection', function(){
    return {
        restrict: 'E',
        templateUrl: 'templates/experience-section.html',
        controller: function($scope){
            $scope.toggleDetails = false;

            $scope.showDetails = function(){
                $scope.toggleDetails = true;
            };
            $scope.hideDetails = function(){
                $scope.toggleDetails = false;
            };
        }
    }
});
HTML

<html lang="en" ng-app="profileApp">
<head>
  <script src="js/lib/angular.js" type="text/javascript"></script>
  <script src="js/controllers/profileController.js" type="text/javascript"></script>
</head>
<body ng-controller="ProfileController">
  <header id="nav" ng-class="{'visible': contentVisible}">
  </header>
<experience-section>
  <div id="project-details" ng-class="{'open': toggleDetails}">
    <button type="button" class="close" ng-click="hideDetails()">X</button>
  </div>
  <button type="button" class="flat-button" ng-click="showDetails()">View Details</button>
</experience-section>


X
查看详细信息
动画结束时，您的更改不会应用。基本上，当您单击切换按钮时它工作的原因是手表正在更新并将更改应用于contentVisibility范围变量。在$on中，在末尾添加一个$scope.$apply（），当动画结束时，它将正确添加类

$scope.$on('animationEnd', function(){
    $scope.contentVisible = true;
    $scope.$apply();
});
这是一个砰的一声

好的，这是一个常见的错误。为了知道作用域内的内容何时发生了变化，我们需要运行一个摘要周期，对作用域的所有内容进行脏检查，然后通知视图它们需要更新。（如果您想了解更多信息，请参阅官方文件：）

通常，你几乎不必担心消化周期，angular会自动为你做这件事。。。只要你呆在天使的世界里。当我说angular的世界时，我指的是angular的DOM事件绑定（如
ng click
，
ng change
，
ng touch
…）和
$timeout
服务之一

在您的情况下，当您这样做时：

$('#cityOutline svg').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) { 
         $scope.$emit('animationEnd');
});
不幸的是，你不再是天使的世界了。这意味着，当您发射“animationEnd”事件时（即使使用angular的助手$on和$emit发射），不会触发angular摘要循环，angular不知道该值已更改，因此无法更新视图

因此，在您的情况下，解决方案就是调用
$scope.$apply（）
就在
$scope.$emit（）
之后。通过这种方式，您可以强制angular检查是否有任何更改。 因此，您的代码如下所示：

$('#cityOutline svg').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) { 
         $scope.$emit('animationEnd');
         $scope.$apply();
});
下面是当你点击“关闭”按钮时，你的奇怪行为发生了什么：

  • animationEnd事件被触发（显然是由jQuery触发的）
  • 您的代码更新作用域的值
  • angular现在没有检测到这种变化，因为没有调用摘要循环
  • 点击关闭按钮
  • 您的代码会更新其他作用域的值
  • 现在angular正在运行它的摘要循环
  • 它检测到（刚才）两个值发生了变化
  • 然后它告诉视图，事情已经改变，需要更新
因此，视图仅在ng单击发生后更新，这就是单击时应用这两个类的原因

希望它能帮助您：）

元素ID在整个文档中应该是唯一的。我看到您的标题标签具有相同的id。对不起，复制粘贴工作不正确。只有一个标题。我编辑了我的帖子
templates/experience section.html
的内容是什么？您在
中有html，但不排除？您在其中看到的内容是从templates/experience-section.html中提取的。我只是展示了输出以简化它。我编辑以显示调用“showDetails”的ng单击以获取更多上下文。谢谢您这么做！感谢您的精彩解释，很高兴知道视图是如何更新的，我相信这将在将来提供更多帮助