Question

在引导AngularJS应用程序之前，有没有办法绑定你在表单上写的任何内容？

例如，在此表单中（也可在https://jsbin.com/womuyi中执行）。在点击引导程序input之前，如何将我在button上写的数据绑定到控制器？

＆＃13;

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

＆＃13;

Answer 1

相当丑陋，但您可以使用文档来存储值（或任何其他您想要的对象），等待您的应用程序被引导。

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

Answer 2

在控制器之前使用ng-app指令，如下所示：

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

这将自动为您进行自举。可以在https://docs.angularjs.org/api/ng/directive/ngApp找到相同的官方文档。

Answer 3

你只需在bootstrap Angular App之前保存文本框的值： -

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

see this plunker

Answer 4

我会像在@elecash建议的那样，在Bootstrap之前按照处理输入数据的方式做一些事情，但我会把它添加到常量。

(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代码中：

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

在引导AngularJS应用程序之后将数据绑定到控制器

4 个答案: