2

I want to inject the same variables with different values multiples times to the same controller. This is what I tried. What is a way to get different values in each call?

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 code

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

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

3 回答 3

2

ng-init文档说：

可以滥用该指令在模板中添加不必要的逻辑量。ngInit 只有少数合适的用途，例如用于别名 ngRepeat 的特殊属性，如下面的演示所示；以及通过服务器端脚本注入数据。除了这几种情况，您应该使用控制器而不是 ngInit 来初始化作用域上的值。

您不应该使用ng-init. controller正确的方法是在 AngularJS函数的末尾分配。

从技术上讲，发生的事情是在函数注册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/ aspxpage 分配的。出于这个原因，我建议另一种实现这一目标的方法。我认为这是更清洁的方式。

我建议您通过使用angular.bootstrap而不是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值。

于 2015-10-22T16:12:38.570 回答
0

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

<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>


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

app.controller("myCtrl", ["$scope",function($scope) {
    console.log($scope.test);
    console.log($scope.test1);
}]);
于 2015-10-22T16:19:44.093 回答
0

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

演示

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

app.controller("myCtrl", ["$scope", '$timeout',function($scope, $timeout) {
    $timeout(function(){ 
        console.log($scope.test);
        console.log($scope.test1);  
    }, 1);
}]);
于 2015-10-22T16:29:33.503 回答