Question

以下代码突然停止工作。我收到一个控制台日志错误，$ scope未定义。当我通过$ scope时，控制台错误消失了，但代码仍无法正常工作，但页面设置为动画！＆＃39;显示在控制台窗口中。

.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";            
          });
       }
    }
});

我还尝试过以下方法：

1

.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";            
          });
       }
    }
});

3

//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";         
          });
       }
    }
});

4

//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();
              });
           }
        }
    });

Answer 1

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

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

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

Answer 2

在您的指令中，link函数包含scope作为参数。

因此，根据您的link功能，它被定义为scope。因此，您必须将$scope作为范围。

所以

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

将成为

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

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

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

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

也不是，因为您要更新jQuery上下文中的范围，您可能还需要在指令代码中调用scope.$apply();。

Answer 3

除了上述答案，您还需要在事件中应用范围来运行摘要。

<强>代码

.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
          });
       }
    }
});

Answer 4

最终，我决定将onclick函数移动到我的'navigationController'并应用$ rootScope来引用'mainController'中的$ scope。我在another post中读到$ 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; 
    };

}]);

angular directive $ scope undefined

4 个答案: