在引導AngularJS應用程序後將數據綁定到控制器

在引導AngularJS應用程序之前，有什麼方法可以綁定任何可以在表單上寫入的東西？在引導AngularJS應用程序後將數據綁定到控制器

例如，以這種形式（也可在https://jsbin.com/womuyi中執行）。在點擊引導程序button之前，如何將控制器上的數據綁定到input上？

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta name="description" content="Angular Bootstrap Call Example"> 
 
    <meta charset="utf-8"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body ng-controller="MainCtrl as vm"> 
 
    Please type something before bootstrapping AngularJS 
 
    
 
    <form> 
 
    <input type="text" ng-model="vm.sth"><br/> 
 
    You wrote {{ vm.sth }} 
 
    </form> 
 
    
 
    <button onclick="doBootstrap()">Bootsrap AngularJS</button> 
 
    
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script> 
 
    <script> 
 
    angular 
 
     .module('main', []) 
 
     .controller('MainCtrl', function(){ 
 
     var vm = this; 
 
     // How to bind what I wrote on the input after bootstrap?? 
 
     }); 
 
    
 
    function doBootstrap() { 
 
     angular.bootstrap(document, ['main']); 
 
     document.querySelector('button').disabled = 'disabled' 
 
    } 
 
    </script> 
 
</body> 
 
</html>

來源

2015-09-02 Alex Such

相當難看，但你可以用文件來存儲值（或任何你想要的其他物體）要等到你的應用程序是自舉。控制器之前

<!DOCTYPE html> 
<html> 
<head> 
<meta name="description" content="Angular Bootstrap Call Example"> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
</head> 
<body ng-controller="MainCtrl as vm"> 
    Please type something before bootstrapping AngularJS 

    <form> 
    <input id="sthInput" type="text" ng-model="vm.sth"><br/> 
    You wrote {{ vm.sth }} 
    </form> 

    <button onclick="doBootstrap()">Bootsrap AngularJS</button> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script> 
    <script> 
    angular 
     .module('main', []) 
     .controller('MainCtrl', function(){ 
     var vm = this; 
     vm.sth = document.myBootstrap.sth; 
     }); 

    function doBootstrap() { 
     var sthValue = document.querySelector("#sthInput"); 

     document.myBootstrap = { 
     sth: sthValue.value 
     }; 


     angular.bootstrap(document, ['main']); 
    } 
    </script> 
</body> 
</html>

來源

2015-10-05 12:28:30 elecash

爲什麼不使用ngApp？ – jsNovice

@iLoveJS在ng-app執行前，他可能需要一個變量，所以使用ng-app將不起作用。例如，他將不同的服務器路由到同一個域，他想知道如果他在美國或中國，他將在哪個服務器上提供不同的行爲。 – elecash

謝謝@elecash。儘管我遇到了一些問題，因爲在我的應用程序引導之後有很多異步控制器加載*，所以這似乎是最好的解決方案 –

使用NG-應用指令如下：

<body ng-app="main" ng-controller="MainCtrl as vm">

這將自動進行引導你。相關的官方文檔可在https://docs.angularjs.org/api/ng/directive/ngApp找到。

來源

2015-10-05 13:16:18 jsNovice

正如@elecash所說，我需要在引導應用程序之前做一些工作，所以使用ngApp不是選項 –

你剛纔保存的文本框的值引導角應用之前： -

`beforeData = (document.querySelectorAll(".beforeBootstrap")[0]).value; 
    angular.bootstrap(document, ['myApp']); 
    $event.target.disabled = 'disabled';`

see this plunker

來源

2015-10-05 19:28:46 Sandeep

我會做沿着引導前處理輸入數據，如@elecash提示線的東西接近這個，但我會將它添加到一個常量。

(function() { 
    'use strict'; 
    window.doBootstrap = function() { 
     window.values = {}; 
     var inputs = document.querySelectorAll('input'), 
      input; 

     for (var i = 0; i < inputs.length; i += 1) { 
     input = inputs[i]; 
     window.values[input.getAttribute('ng-model')] = input.value; 
     } 

     angular.bootstrap(document, ['main']); 
    } 
}());

然後在您的角度代碼：

angular 
    .module('main', []) 
    .controller('MainCtrl', ['preBootstrap', function(preBootstrap){ 
     var vm = this; 
     angular.forEach(preBootstrap, function(value, key) { 
      var modifiedKey = key.replace('vm.', ''); 
      this[modifiedKey] = value; 
     }, vm); 
    }]) 
    .constant('preBootstrap', window.values);

來源

2015-10-05 22:00:41

這是我的解決方案，@ elecash的建議後，謝謝！ –

在引導AngularJS應用程序後將數據綁定到控制器

回答

相關問題