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文档说：

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

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

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

基本上，首先调用ng-controller的原因是优先级。如果您查看priority，则ng-init指令有450＆amp;指令的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懒惰地初始化角度应用，而不是在页面加载时使用ng-app初始化应用。

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

现在你会想到如何解决在使控制器可用之前将变量赋值给范围的问题，为此你可以创建一个值对象并分配填充在jsp / {上的变量。 {1}}页面aspx（服务种类）

value

通过执行上述操作，您可以轻松地在控制器中提供您的值，＆amp;然后无需等到使用<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值。

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将变量注入控制器

HTML

JavaScript代码

3 个答案:

代码