标签: angularjs-scope

在我的应用程序中,我routeUpdate用来检查$location.search字符串是否已更改并在我的视图中相应地导航.像这样.

$scope.$on('$routeUpdate', function(next, current) {        
    var slide_key = $location.search().slide_key;
    if (slide_key)
    $scope.go_to_slide(slide_key);      
});

还要记住,我使用reloadOnSearchfalse来重新加载控制器.

通常我通过改变它来触发它$location.search并且工作正常

一切正常但有一种情况我想在不改变搜索参数的情况下触发此行为.

我试图将搜索参数再次更改为相同的值 - >没有运气.

如果我将其更改为另一个值,那么routeUpdate火灾和一切正常.

那么如何在routeUpdate不改变params值的情况下手动触发$location.search？

在$ timeout函数中访问对象需要做些什么特别的事情吗？

当我尝试在$ timeout函数中访问它时,我得到错误,说路由未定义,但在$ timeout函数(控制台日志所在的位置)之外,它会记录对象,其中的所有内容都符合预期:

$scope.drawRoutes = function(routes) {
  console.log(routes);
  for (var i = 0; i < routes.length; i++) {
     $timeout(function() {
        MapService.directionsService.route(routes[i], function(response, status) {
           if (status == google.maps.DirectionsStatus.OK) {
              MapService.direction_renderers.push(new google.maps.DirectionsRenderer());
              MapService.direction_renderers[MapService.direction_renderers.length - 1].setMap(MapService.gmaps.map);
              MapService.direction_renderers[MapService.direction_renderers.length - 1].setDirections(response);
              $scope.connectors_created += 1;
              $scope.$digest();
           }
        });
     }, 1000);
   }
};

为什么$timeout在Angular JS中使用内部函数时,如下所示,工作正常.

var mytimeout = $timeout(function(){
    console.log("MyTimeout Executed");
},2000);
mytimeout.then(
    function() {
        console.log( "mytimeout resolved!", Date.now() );
    },
    function() {
        console.log( "mytimeout rejected!", Date.now() );
    }
);

但是当我使用$timer里面的函数时,$scope它不起作用,像这样:

$scope.myFunction = function(){
   console.log("MyTimeout Executed");
}; 

var mytimeout = $timeout($scope.myFunction(),2000);
mytimeout.then(
    function() {
        console.log( "mytimeout resolved!", Date.now() );
    },
    function() {
        console.log( "mytimeout rejected!", Date.now() );
    }
);

并收到此错误:

TypeError: undefined is not a function
    at http://0.0.0.0:3000/assets/angular.js?body=1:14015:28
    at completeOutstandingRequest (http://0.0.0.0:3000/assets/angular.js?body=1:4301:10)
    at http://0.0.0.0:3000/assets/angular.js?body=1:4602:7 angular.js?body=1:9779
(anonymous function) angular.js?body=1:9779 …

所以我正在努力将范围传递给我的自定义指令.

这是我的HTML

<li ng-repeat="post in posts | filter:search | orderBy:sortField:reverse" class="archives-listing" ng-class="{'last-border':$last}">

    <archive-notes></archive-notes>


</li>

这是我的指示

app.directive('archiveNotes', function(){
return {
    restrict: 'E',
    transclude: true,
    scope: {
        notes: '@',
        paths: '@'
    },
    controller: function($scope) {

    },
    templateUrl: '/wp-content/themes/twentythirteen/js/angular/templates/notes.html'
}
})
app.directive('archiveFolders', function(){
return {
    require: '^archiveNotes',
    restrict: 'E',
    transclude: true,
    scope: {
        path: '@'
    },
    link: function(scope, element, attrs) {

    },
    templateUrl: '/wp-content/themes/twentythirteen/js/angular/templates/folders.html'
}
});

这是我的模板.

notes.html
<div ng-class="{'found' : find(post.paths[$index], search)}" class="arch-notes">
    <div ng-bind-html="is_NotesEmpty(post.notes)">{{post.notes}}</div>
    <archive-folders></archive-folders>
</div>

folders.html
<div ng-repeat="path in post.paths …

我正在使用一个控制器作为子范围的指令,我正试图让它们说话.似乎当我从子控制器发出一个事件时,父指令只能在没有声明隔离范围的情况下听到这个事件.为什么在我的指令块中声明一个隔离范围$ emit会听到事件？

HTML

<flippy data-click-toggle="true" data-mouseover-toggle="true">
    <flippy-front>
      <div ng-controller="test">
        <div class="test" ng-click="flip()">
          front
        </div>
      </div>
    </flippy-front>
    <flippy-back>
      <div ng-controller="test">
        <div class="test" ng-click="flip()">
          back
        </div>
      </div>
    </flippy-back>
</flippy>

JS

poop = angular.module('angular-flippy', []);

poop.directive('flippy', function() {
  return {
    restrict: 'E',
    scope: {},              <------- works when isolate scope not declared
    link: function($scope, $elem, $attrs) {

        var flip = function() {
                $elem.toggleClass('flipped');
            }

        $scope.$on("flipped", flip);

    }
  };
});

poop.controller('test', ['$scope', function($scope) {
    $scope.flip = function() {
      $scope.$emit("flipped");
    };
}]);

codepen:http: …

我有一个简单的ng-repeat,显示一个值列表(财务收入).如何计算此列表中的平均值？

<div ng-repeat="data in MyData">
    {{ data.income }}
</div>
<div>
    Average:
</div>

哪个显示:

11
14
8
9
21
10
2
1
5
13

谢谢

我试图通过其控制器为一个表单设置一个验证令牌"fooname",点击一个基于条件的按钮.

但它看起来像form.$ error.fooname没有设置.{{form.$ error.fooname}}被解析为null.

JavaScript的:

angular.module('app', [])
.controller('controller', ['$scope', function ($scope) {
    $scope.data={};
    $scope.data.validate=function () {
        if ($scope.data.name=="foo") {
            $scope.form.$setValidity("fooname",true);
        }
    };
}]);

HTML:

<form name="form" ng-controller="controller" 
ng-submit="data.validate()" ng-init="form.$setValidity('fooname',false)" 
novalidate>
    <input type="text" ng-model="data.name" name="name"/>
    <button type="submit">Submit</button><br/>
    {{data}}<br/>
    {{form.$error.fooname}}
</form>

我有一个AngularJS应用程序,需要一个ajax加载器来处理$ http所做的每个请求 - 有一个简单的方法来做到这一点.

我现在的解决方案是每次调用$ http时设置$ rootScope.loading = 1,并在成功设置$ rootScope.loading = 0 ..

这是什么"最佳实践"？

我的代码现在看起来像:

$rootScope.loading = 1;
$http({method : "POST", url:url, data: utils.params(data), headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).success(function() {
    $rootScope.loading = 0;
});

我想测试以下指令"spinInput",它需要ngModel,但是我无法访问指令的范围.我得到的只是一个空洞的范围.使用Angularjs 1.3.13.

指示:

angular.module('charts.spinInput',[]).directive('spinInput', function() {
return {
    restrict: 'E',
    replace: true,
    require:'ngModel',
    scope: {
      min:"@"
    },
    controller:function($scope)
    {
        $scope.test=12;

      $scope.calcAngle=function(point)
        {
            var xDif=point.x-50;
            var yDif=point.y-50;

            return (Math.atan2(yDif, xDif) * 180 / Math.PI);

        };

},

    templateUrl: 'charts/directive/spinInput/spinInput.html',
    link:function(scope, element, attr,ngModel) {
       ...
    }

    };
});

单元测试: 抛出以下错误:TypeError:'undefined'不是对象(评估'innerScope.min')

 describe('spinInput', function() {

 beforeEach(module('charts'));

    var $httpBackend;
    var element;
    var outerScope;
    var innerScope;




    beforeEach(inject(function($rootScope, $compile  , $injector) {
        element = angular.element('<spin-input min="12"></spin-input>');
        $httpBackend = $injector.get('$httpBackend');
        $httpBackend.whenGET('charts/directive/spinInput/spinInput.html').respond(200, '');
        outerScope = $rootScope.$new();
        $compile(element)(outerScope);

        innerScope = element.isolateScope(); …

我之前已经构建了一个AngularJS项目并且熟悉语法.这次我ng-controller="UniversalCtrl as universal"不能工作,我已经尝试了一切.如果我采取universal.showHeader == true并改变它是showHeader == true有效的,但我需要它作为变量universal.就像我说的,我有其他项目遵循相同的结构,他们工作正常.

这是我的HTML代码:

<!DOCTYPE html>
<html>
    <head lang="en">
       <meta http-equiv="cache-control" content="no-store" />
       <meta http-equiv="expires" content="0" />
       <meta http-equiv="X-UA-Compatible" content="IE=edge" />
       <meta http-equiv="pragma" content="no-store" />
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">

       <link href="styles/MarkStrap.css" rel="stylesheet" />
       <link href="styles/Site.css" rel="stylesheet" />

        <script type="text/javascript" src="js/Angular/angular.min.js"></script>
        <script type="text/javascript" src="js/Angular/angular-route.min.js"></script>
        <script type="text/javascript" src="js/Universal/Universal.js"></script>
        <script type="text/javascript" src="js/Universal/Filters.js"></script>
        <script type="text/javascript" src="js/Universal/Directives.js"></script>

        <title>WIN</title>
        <link rel="shortcut icon" href="winIcon.ico">
    </head>
    <body ng-app="winApp" ng-controller="UniversalCtrl as …