通过 ng-init 向控制器注入变量

Question

我想将具有不同值的相同变量多次注入同一个控制器。这就是我尝试过的。在每次调用中获取不同值的方法是什么？

HTML

<body ng-app="myApp">
    <div ng-controller="myCtrl" ng-init="test='helloworld';test1='helloworld2'">

    </div>
    <div ng-controller="myCtrl" ng-init="test='helloworld3';test1='helloworld4'">

    </div>
    <div ng-controller="myCtrl" ng-init="test='helloworld5';test1='helloworld6'">

    </div>
<body>

JavaScript代码

var app = angular.module("myApp", []);

app.controller("myCtrl", ["$scope",function($scope) {
    console.log($scope.test);
    console.log($scope.test1);
}]);

Answer 1

ng-init 文档说：

This directive can be abused to add unnecessary amounts of logic into your templates. There are only a few appropriate uses of ngInit, such as for aliasing special properties of ngRepeat, as seen in the demo below; and for injecting data via server side scripting. Besides these few cases, you should use controllers rather than ngInit to initialize values on a scope.

您不应使用 ng-init 分配初始值。正确的做法是在 AngularJS controller 函数的最后赋值。

从技术上讲，发生的事情是 ng-init 指令在 ng-controller 函数注册后进行评估。这就是为什么 ng-init 的初始化值在控制器内部不可用的原因。

基本上，ng-controller 首先被调用的原因是优先级。如果您查看 priority，ng-init 指令有 450 和指令的 priority 选项，其中 ng-controller 指令有 500，而从 DOM AngularJS 编译指令会根据优先级对它们进行排序。因此 ng-controller 首先执行。

代码

var app = angular.module("myApp", []);

app.controller("myCtrl", ["$scope",function($scope) {
    console.log(test);
    console.log(test1);

    // If you wanted to assign the values dynamically you could make Ajax here
    // that would call the server-side method which will return the values
    // and in success that Ajax you could set those scope values.
    // If any dependent function should get called after assigning them.
    // Then you can call that function from that Ajax success.
    $http.get('/getDefaultValues').then(function(response){
        var data = response.data;
        $scope.test= data.value1;
        $scope.test1 = data.value2;
    });
}]);

编辑

上面的代码似乎无法执行，因为变量值是从 jsp/aspx 页面分配的。出于这个原因，我建议采用另一种方法来实现这一目标。我认为这样做更简洁。

我建议您使用 angular.bootstrap 懒惰地初始化 angular 应用程序，而不是使用 ng-app，后者会在页面加载后立即初始化应用程序。

angular.element(document).ready(function() {
  angular.bootstrap(document, ['TodoApp']);
});

现在您会想，它如何解决在使控制器可用之前将变量分配给范围的问题，对于这种情况，您可以创建一个值对象并分配在 jsp 上填充的变量/aspx 页面 value（服务种类）

<script type="text/javascript">
    angular.element(document).ready(function() {
      //like below you could get value inside your app by assigning
      //to some angular component like constant/value
      angular.module('TodoApp').value('sharedData', {
          'test': @myValueFromAspxPage,
          'test1': @myValueFromAspxPage1
      });
      angular.bootstrap(document, ['TodoApp']);
    });
</script>

通过执行上述操作，您可以轻松地在控制器中使用您的值，然后无需等到一个摘要周期完成使用 $timeout。您可以通过注入控制器内部来使用此值注入内部 sharedData 值。

Answer 2

试试这个...正如@tymeJV 指出的那样，您需要使用分号来分隔 HTML 中的变量名称。您还需要使用 $scope 来引用控制器中的变量。

html

<body ng-app="myApp">     
    <div ng-controller="myCtrl" ng-init="test='helloworld';test1='helloworld2'">

    </div>
    <div ng-controller="myCtrl" ng-init="test='helloworld3';test1='helloworld4'">

    </div>
    <div ng-controller="myCtrl" ng-init="test='helloworld5';test1='helloworld6'">

    </div>
<body>

javascript

var app = angular.module("myApp", []);

app.controller("myCtrl", ["$scope",function($scope) {
    console.log($scope.test);
    console.log($scope.test1);
}]);

Answer 3

找到一个脏修复。感谢大家的投入。

Demo

var app = angular.module("myApp", []);

app.controller("myCtrl", ["$scope", '$timeout',function($scope, $timeout) {
    $timeout(function(){ 
        console.log($scope.test);
        console.log($scope.test1);  
    }, 1);
}]);

通过 ng-init 向控制器注入变量

Inject variables via ng-init to controller

javascript

angularjs

angularjs-bootstrap

angularjs-ng-init

HTML

JavaScript代码

代码