标签: angularjs-digest

关于范围的角度初学者问题(这里的文档).

1. $eval 在范围的上下文中执行表达式.
2. $apply基本上是打电话$eval然后$digest.
3. 为什么要$evalAsync打电话$digest(或者更确切地说,确保$digest被叫)？

似乎应该真的被称为,不是吗？$evalAsync$applyAsync

我是初学者 - 我错过了什么？

我有一个卑鄙的堆栈网站.我想使用ExecuteFunction绑定按钮以在对话框中启动此网站:

function doSomethingAndShowDialog(event) {
    clickEvent = event;
    Office.context.ui.displayDialogAsync("https://localhost:3000/try", {}, function () {})
}

单击该按钮将打开一个带有以下URL的对话框,它确实显示了页面的内容:

https://localhost:3000/try?_host_Info=excel|web|16.00|en-us|7fe9b4e9-d51e-bea5-d194-c817bc5ed4bc|isDialog#%2Ftry%3F_host_Info=excel%7Cweb%7C16.00%7Cen-us%7C7fe9b4e9-d51e-bea5-d194-c817bc5ed4bc%7CisDialog

然而,在控制台中,有错误:$ rootScope:infdig无限$消化循环在angular.bootstrap(document, ['myapp']):

var wait = setTimeout(myFunction, 1000);
Office.initialize = function (reason) {
    $(document).ready(function () {
        angular.bootstrap(document, ['myapp']) 
        console.log("bootstrapped inside Office.initialize");
        clearTimeout(wait);
    })
}

function myFunction () {
    $(document).ready(function () {
        angular.bootstrap(document, ['myapp']) 
        console.log("bootstrapped outside Office.initialize");
    })
}

app = angular.module("myapp", []);
app.config(...);
app.controller(...);

如果我们只是https://localhost:3000/try在浏览器中打开,则没有错误.

有谁知道为什么这个长网址没有用angular.bootstrap？我们怎么能解决这个问题？

编辑1:控制台的屏幕截图https://localhost:3000/try?_host_Info=excel....请注意,既不显示bootstrapped inside Office.initialize也不bootstrapped …

tl; dr:最初的问题是"如何在每个摘要周期触发回调？" 但潜在的问题更有趣,因为这回答了两个问题,我继续修改标题.=)

背景:我试图控制的角度,当编译完成后的HTML(搜索引擎优化预渲染的原因),解决所有的依赖,ngincludes,API调用等."最聪明"的方式到目前为止,我已经找到了后是通过检查是否消化周期已趋于稳定.
所以我想,如果我运行一个回调每一个消化周期触发时间,并就当前的时间,如果没有其他的周期是任意时隔(2000毫秒)内触发,我们可以认为编译稳定了,页面准备为SEO爬虫存档.

到目前为止的进展:我想看看$ rootScope.$$阶段会做但是,虽然很多交互应该触发那个观察者,但我发现它只在第一次加载时触发一次.

这是我的代码:

app.run(function ($rootScope) {
  var lastTimeout;
  var off = $rootScope.$watch('$$phase', function (newPhase) {
    if (newPhase) {
      if (lastTimeout) {
        clearTimeout(lastTimeout);
      }
      lastTimeout = setTimeout(function () {
        alert('Page stabilized!');
      }, 2000);
    }
  });

解决方案:添加了Mr_Mig的解决方案(荣誉)以及一些改进.

app.run(function ($rootScope) {
  var lastTimeout;
  var off = $rootScope.$watch(function () {
    if (lastTimeout) {
      clearTimeout(lastTimeout);
    }
    lastTimeout = setTimeout(function() {
      off(); // comment if you want to track every digest stabilization
      // custom logic …

我的任务是使用angular处理删除的文本.我一直$scope is not defined在拖放事件上遇到这个错误.知道如何解决这个问题吗？

我已经研究了角度拖放库.它们不允许拖放简单文本.他们中的大多数都使用列表.如果有一个适用于此任务,请告诉我

以下是plunker:

[ http://plnkr.co/edit/egKL13hsHka6RiX4UfSS?p=preview] [1]

这是控制器:

var app = angular.module("test",  []);
app.controller('testCtrl', ['$scope',function  ($scope) {
   $scope.nouns = ['guitar'];
   $scope.verbs = ['play'];
   $scope.allowDrop= function (ev) {
        ev.preventDefault();
   };
   $scope.drag=  function (ev) {
        ev.dataTransfer.setData("Text", ev.target.id);
   };    
   $scope.drop=  function (ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("Text");
        if(ev.target.id =='verb' && $scope.verbs.indexOf(data) != -1){
            ev.target.appendChild(document.getElementById(data));
        }
        else{
            alert(data + ' is not a ' + ev.target.id +'. Try again');
        }            
    };      
  }]);

我正在尝试创建一个ng-model从父html标签更改的指令,但它不起作用:

var app = angular.module('myApp',[]);
app.controller('ParentController',['$scope', function($scope) {
  $scope.anyVar = "Anything";

  $scope.list = ['It doesn\'t work','It also doesn\'t work'];

}]);

app.directive('customValue', [function() {
    return {
      restrict: 'A',
      require: '^?ngModel',
      link: function(scope, element, attr, ngModel) {
          element.bind('click',function() {
              var element = angular.element(this);
              ngModel.$setViewValue(element.attr('custom-value'));
          });

          scope.$watch(function(){
              return ngModel.$modelValue;
          }, function(modelValue){
              console.log("Wow, it was changed to : " + modelValue)  
          });
      }
    };
}]);

这是我的看法:

<div ng-app="myApp">
 <div ng-controller="ParentController">
       {{anyVar}}  
     <ul ng-model="anyVar">
       <li>
            <a custom-value="111">It' not working</a>
        </li>
        <li>
            <a custom-value="222">It's …

AngularJS(和坦率地说,JavaScript)的新功能,但是从我收集到的内容中,只有当更改发生在angular的雷达之外时,才需要显式调用$ scope.$ apply().下面的代码(从这个plunker粘贴)让我觉得不需要调用它的情况,但这是我能让它工作的唯一方法.我应该采取不同的方法吗？

index.html的:

<html ng-app="repro">
  <head> 
    ...
  </head>
  <body class="container" ng-controller="pageController">
    <table class="table table-hover table-bordered">
        <tr class="table-header-row">
          <td class="table-header">Name</td>
        </tr>
        <tr class="site-list-row" ng-repeat="link in siteList">
          <td>{{link.name}}
            <button class="btn btn-danger btn-xs action-button" ng-click="delete($index)">
              <span class="glyphicon glyphicon-remove"></span>
            </button>
          </td>
        </tr>
    </table>
  </body>
</html>

的script.js:

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

var DataStore = repro.service('DataStore', function() {
  var siteList = [];

  this.getSiteList = function(callback) {
    siteList = [ 
      { name: 'One'}, 
      { name: 'Two'}, 
      { name: 'Three'}];

    // Simulate the async …

我正在使用Angularjs 1.3.7,并且发现Promise.all在成功响应后不更新angularjs视图,而$ q.all确实如此.这是后来改变,因为Promises包含在原生javascript中或者背后的原因是什么？

我有两个<div>带有自己的控制器.第一个div有一个ng-model="listEntries".我listEntries在这个<div>控制器中初始化.

app.controller('firstController', function($scope,serviceForFirst){
      serviceForFirst.init();
      serviceForFirst.getList($scope);
});

HTML

<div ng-controller="firstController">
 <ul>
  <li ng-repeat="each in listEntries">
     {{each.name}}
  </li>
 <ul>
</div>

我将传递$scope给getList()并设置$scope.listEntries值serviceForFirst.我然后listEntries用作ng-model.

app.service('serviceForFirst',function(){
 var list=[];
 var init=function(){
  list = [{....}];

 };

 var getList=function($scope){
  $scope.listEntries = list;

 };
 var update=function(newEntity){
   list.push(newEntity);
 };
return{
 init:init,
 getList:getList,
 update:update
};
});

这是我的第二个控制器和与之关联的服务.我打算listAll每次调用时都会推送新元素addNew().这就是我试图这样做的方式.

app.controller('secondController', function($scope,serviceForSecond){
  serviceForSecond.init();
  $scope.addNew=function(newEntity){
         serviceForSecond.addNew(newEntity);
  };
});


app.service('serviceForSecond',function(serviceForFirst){
  var entities=[];
 var …

在我的Angular应用程序中,需要发生以下事件序列:

1. 用户单击一个按钮
2. 通过翻转绑定ng-show的布尔范围变量来显示先前隐藏的div
3. 新显示的视图(位于页面下方)应滚动到视图中.

目前,滚动不起作用,因为这一切都发生在同一摘要中.这意味着ng-show绑定变量的新状态没有机会更新DOM.因此,我们尝试滚动到一个元素,就DOM而言,该元素尚不可见.

通过使用$ timeout包装滚动调用来减轻这种情况,这会强制所有摘要在尝试滚动之前完成.虽然这有效,但感觉就像是黑客,我想知道是否有更好的方法来做到这一点.

这是一个演示问题的小提琴:

http://jsfiddle.net/fNhnj/3/

(请注意,此代码是我的真实代码的简化版本,仅用于演示问题,并且我意识到它不遵循最佳实践.请放心,我的实际代码不会在控制器中执行直接DOM操作.)

视图:

<div ng-app="app" ng-controller="MyCtrl" id="container">
    <button ng-click="scroll()">Unhide element and scroll</button> (will not work until $timeout call is uncommented)
    <div style="height:1000px; background-color: #ddddd0">
    </div>
    <div id="target" ng-show="isVisible">section to scroll to</div>
</div>

JS:

angular.module("app", [])

.controller('MyCtrl', 
    function MyCtrl($scope, $timeout) {
        $scope.isVisible = false;
        $scope.scroll = function() {
            $scope.isVisible = true;
            // uncommenting the $timeout fixes it, but feels like a hack
            //$timeout(function() {
                $('body').animate({
                    scrollTop: $("#target").offset().top
                }, 500); …

我正在对视图中用于生成列表的数据执行AJAX请求.我需要知道$ scope更新的时间以及收到成功响应后呈现视图的时间,以便我可以为列表动态设置一些初始值和一些事件处理程序.

我目前正在使用以下代码,但没有做到这一点:

responsePromise.success(function (data, status, headers, config) {
    var slideInfos = data;
    $scope.slideInfos = slideInfos;
    setInitialSliderValues();
});

在我调用setInitialSliderValues()时,视图仍然没有刷新.

当我尝试使用以下内容时,我收到错误"$ digest已在进行中":

responsePromise.success(function (data, status, headers, config) {
    var slideInfos = data;
    $scope.$apply(function () {
        $scope.slideInfos = slideInfos ;
        setInitialSliderValues();
    }
});

如何在不使用检查我期望的更改的计时器的情况下确保数据更改已在页面上生效.

我为这段代码得到了一个无限循环:

    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
        var isLoggedIn = (authService.authentication && authService.authentication.isAuth);
        if (isLoggedIn) {
            //if user is logged and tries to access login page, prevent it
            if (toState.name === 'app.login') {
                event.preventDefault();
                return fromState;
            } 
        } else {
            if (toState.name !== 'app.login') {
                event.preventDefault();
                $state.go('app.login');
                return;
            }
        }
    });

我也有这套:

function config($stateProvider, $urlRouterProvider, $ocLazyLoadProvider) {
    $urlRouterProvider.otherwise('/main');

    $stateProvider
    .state('app', {
        abstract: true,
        url: '',
        controller: 'mainCtrl',
        controllerAs: 'mainCtrl',
        template:'<div ui-view></div>'      
    })
    .state('app.login', {
        url: '/logn'
        controller: 'loginCtrl',
        controllerAs: …

我正在尝试使用requestAnimationFrame创建具有滚动编号的javascript动画

In order to see the see the animation rolling, I need to use a $apply to refresh the view. The problem here is when I start the animation, the digest cycle is already running so my $apply return an error "$apply already in progress".

Looking for a solution I use $timeout of 0 which work perfectly but I was wondering if there was other solution to avoid using a timeout that is not really good in terms of performance? …