通過 ng-init 向控制器注入變量
[英]Inject variables via ng-init to controller
問題描述
我想多次將具有不同值的相同變量注入同一個控制器。 這是我嘗試過的。 在每次調用中獲取不同值的方法是什么？
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);
}]);
3 個解決方案
解決方案1
2 2015-10-22 16:12:38
ng-init文檔說：
可以濫用此指令將不必要的邏輯量添加到您的模板中。 ngInit 只有幾個合適的用途，例如為 ngRepeat 的特殊屬性設置別名，如下面的演示所示； 以及通過服務器端腳本注入數據。 除了這幾種情況之外，您應該使用控制器而不是 ngInit 來初始化范圍上的值。
您不應該使用ng-init分配 init 值。 正確的做法是在最后分配 AngularJS controller函數。
從技術上講，發生的事情是在注冊ng-controller函數后對ng-controller ng-init指令進行評估。 這就是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而不是使用ng-app來初始化你的 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值中。
解決方案2
0 2015-10-22 16:19:44
試試這個...正如@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);
}]);
解決方案3
0 已采納 2015-10-22 16:29:33
發現一個骯臟的修復。 感謝大家的投入。
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指令初始化服務器數據？
[英]Initialize the server data from ng-init directive via calling angular controller function?
Ionic / AngularJs控制器初始化ng-init不起作用
[英]Ionic/AngularJs Controller Initialization ng-init doesn't work
Angular：在沒有ng-init的情況下將HTTP請求數據加載到控制器中
[英]Angular: Loading HTTP request data into a controller without ng-init
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.