Question

我使用ng-init

在服务器端初始化AngularJS控制器的一些变量

/* in my server side View */
<div ng-controller="myController" ng-init="myFoo=@myFoo;myBar=@myBar">...</div>

/* in the myApp.js */
app.Controller("myController", function(){
  // wait until myFoo and myBar are initialized, 
  // once defined, perform other tasks

  $scope.$watch("myFoo", function(n,o){}); //?
  $scope.$watch("myBar", function(n,o){}); //?

  // other actions, depending on myFoo and myBar
  for(i=0; i<myFoo; i++) { console.log(myBar); }
});

我需要确保当angularjs到达for周期时myFoo和myBar变量已经初始化。

有没有办法（不使用像magic=1500 $timeout(magic)这样的奇怪的东西？）

这是CodePen

＆＃13;

var app = angular.module("myApp", []);
app.controller("myCtrl", ['$scope', '$timeout', function($scope, $timeout) {


  $scope.myFoo = false;
  $scope.myBar = false;
  
  $scope.$watch("myFoo", function(n,o){
    //$timeout(null,1500);    
    console.log("watch > myFoo from: "+o+" to "+n+"; >"+$scope.myFoo);
  });
  $scope.$watch("myBar", function(n,o){
    //$timeout(null,500);
    console.log("watch > myBar from: "+o+" to "+n+"; >"+$scope.myBar);
  });
  
  console.log("> Main thread: myFoo is: " + $scope.myFoo);
  console.log("> Main thread: myBar is: " + $scope.myBar);
 }]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
  
  <div  ng-init="myFoo=true;myBar=true"></div>
</div>

＆＃13;

正如我们从该代码的执行中看到的那样

> Main thread: myFoo is: false
> Main thread: myBar is: false
watch > myFoo from: true to true; >true
watch > myBar from: true to true; >true

主线程在初始化之前到达变量... 不好！</ p>

Answer 1

您可以在ng-init上激活一个函数。

var app = angular.module("myApp", []);
app.controller("myCtrl", ['$scope', '$timeout', function($scope, $timeout) {


  $scope.myFoo = false;
  $scope.myBar = false;
  
  $scope.$watch("myFoo", function(n,o){
    //$timeout(null,1500);    
    console.log("watch > myFoo from: "+o+" to "+n+"; >"+$scope.myFoo);
  });
  
  $scope.$watch("myBar", function(n,o){
    //$timeout(null,500);
    console.log("watch > myBar from: "+o+" to "+n+"; >"+$scope.myBar);
  });
  
  $scope.load = function(){  
     
        console.log("> Main thread: myFoo is: " + $scope.myFoo);
        console.log("> Main thread: myBar is: " + $scope.myBar);
    
  }
  
 }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
  
  <div  ng-init="myFoo=true;myBar=true;load()"></div>
</div>

Answer 2

您可以等待两个变量返回，然后只是销毁侦听器：

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


  $scope.myFoo = false;
  $scope.myBar = false;

  var fooListen = $scope.$watch("myFoo", function(n,o){
    console.log("watch > myFoo from: "+o+" to "+n);
    checkInit();
  });
  var barListen = $scope.$watch("myBar", function(n,o){
    console.log("watch > myBar from: "+o+" to "+n);
    checkInit();
  });

  function checkInit(){
    if($scope.myFoo && $scope.myBar){
      console.log("> Main thread: myFoo is: " + $scope.myFoo);
      console.log("> Main thread: myBar is: " + $scope.myBar);
      //remove the watches
      fooListen();
      barListen();
    }

  }

在这种情况下，每次变量变化时，您都会听到变化。当两个变量都被初始化时，您可以运行您想要的任何代码。但是美元手表怎么样？你实际上可以告诉他们停止听。有关详细信息，请查看此处：AngularJS : Clear $watch

这是更新后的笔：https://codepen.io/anon/pen/NvGOQE?editors=1112#anon-login

AngularJs在ng-init

2 个答案: