angular指令$scope未定义

下面的代码突然停止工作。我收到一个控制台日志错误，$scope未定义。当我传递$scope时，控制台错误消失了，但代码仍然不起作用，但"页面已动画化！"显示在控制台窗口中。

.directive('active', function(){
    return{
             link: function(scope, element, attrs){
                 $(element).on('click', function(){
                     console.log('Page animated!');
                     //addes class to animate page
                     $scope.elementClass = "my-slide-animation";            
          });
       }
    }
});

带有$scope的代码已通过

.directive('active', function(){
    return{
             link: function(scope, element, attrs){
                 $(element).on('click', function($scope){
                     console.log('Page animated!');
                     //addes class to animate page
                     $scope.elementClass = "my-slide-animation";            
          });
       }
    }
});

我也尝试过以下方法：

.directive('active', function($scope){
        return{
                 link: function(scope, element, attrs){
                     $(element).on('click', function($scope){
                         console.log('Page animated!');
                         //addes class to animate page
                         $scope.elementClass = "my-slide-animation";            
              });
           }
        }
    });

2.）

//ng-enter and ng-leave animation
.directive('active', function($scope){
    return{
             link: function($scope, element, attrs){
                 $(element).on('click', function($scope){
                     console.log('Page animated!');
                     //addes class to animate page
                     $scope.elementClass = "my-slide-animation";            
          });
       }
    }
});

//ng-enter and ng-leave animation
.directive('active', function(){
    return{
             link: function(scope, element, attrs){
                 $(element).on('click', function(){
                     console.log('Page animated!');
                     //addes class to animate page
                     scope.elementClass = "my-slide-animation";         
          });
       }
    }
});

//ng-enter and ng-leave animation
.directive('active', function(){
    return{
             link: function(scope, element, attrs){
                 $(element).on('click', function(scope){
                     console.log('Page animated!');
                     //addes class to animate page
                     scope.elementClass = "my-slide-animation";         
          });
       }
    }
});

完整的app.js

 angular.module('myWebsite',['ngRoute', 'duScroll','ngAnimate','headroom'])
    .config(function($routeProvider){
        $routeProvider
            .when('/#', {
                templateUrl:'home.html'
                })
            .when('/about', {
                templateUrl:'about.html'
                })
            .when('/contact',{
                templateUrl:'contact.html'
                })
            .when('/services', {
                templateUrl:'services.html'
                })
            .otherwise({
                templateUrl:'home.html'
                });
    })
    .controller('mainCtrl', function($scope, $document)
    { 
    //enables angular-scroll.min.js with dependency of 'duScroll'
     $scope.toTheTop = function() {
          $document.scrollTopAnimated(0, 2000).then(function() {
            console && console.log('You just scrolled to the top!');
          })
        }       
    })
    //directive for jQuery nivoSlider plugin
    .directive('slideit', function(){
        return{
            link: function(scope, element, attrs){
            $(element).nivoSlider();
            }
        }
    })
    //ng-enter and ng-leave animation
    .directive('active', function(){
        return{
                 link: function(scope, element, attrs){
                  $(element).on('click', function(){
                  console.log('Page animated!');
                  //addes class to animate page
                  scope.elementClass = "my-slide-animation";
                  scope.$apply();
              });
           }
        }
    });

因为它在link函数中被定义为scope，而不是$scope

link: function(scope, element, attrs){
              ^^^
scope.elementClass = "my-slide-animation";

在指令中，链接函数包含scope作为参数。

所以根据你的link函数，它被定义为scope。所以您必须将$scope作为范围。

所以

$scope.elementClass = "my-slide-animation";

将成为

scope.elementClass = "my-slide-animation";

否则，如果你想使用$scope，那么

在您的链接功能中进行更改

link: function($scope, element, attrs){

同样，由于您正在更新jQuery上下文中的作用域，您可能还需要在指令代码中调用scope.$apply();。

除了上面的答案之外，您还需要在事件内部应用范围来运行摘要。

代码

.directive('active', function(){
    return{
             link: function(scope, element, attrs){
              element.on('click', function(){
              console.log('Page animated!');
              //addes class to animate page
              scope.elementClass = "my-slide-animation";
              scope.$apply(); //run digest cycle to update binding
          });
       }
    }
});

最终，我决定将onclick函数移到我的"navigationController"中，并应用$rootScope引用"mainController"中的$scope。我在另一篇文章中读到$rootScope的工作原理类似于JS和其他编程语言中的全局变量；我知道很糟糕。我确实检查了console.log，看看当导航按钮以外的按钮没有启动时，onclick事件是否正在启动。：）

尽管这种方法正在发挥作用，但我仍然愿意就如何更好地解决这项任务提出建议。

angular.module('myWebsite')
.controller('navigationController', ['$scope', '$location', '$element','$rootScope', function($scope, $location, $element, $rootScope){
    // adds class 'my-slide-animation' to ng-view when navigation buttons are clicked
            $element.on('click', function(){
            console.log('animation go!');
            $rootScope.elementClass = "my-slide-animation"; 
        }); 
    //adds class on current page navigation button 'bold'
    $scope.isCurrentPath = function(path)
    {
        return $location.path() == path; 
    };
}]);

相关内容

最新更新

热门标签：