通过角度服务在黑白控制器中手动启动和数据共享

时间：2018-03-19 08:46:35

标签： angularjs angular-services

  • 我正试图通过角度服务在黑白控制器中共享数据。 如果我让我的应用程序自动启动它，它工作得非常好。
  • 但是当我使用相同的应用程序手动引导部分HTML时，控制器之间的数据共享无法按预期工作。

随附的是小提琴和plnckr。

plnckr with auto bootstrap

plnckr with manual bootstrap

以下是使用自动引导程序通过服务/工厂共享黑白控制器的工作代码 

// Code goes here

// Code goes here

// Code goes here

(function() {
  'use strict';

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

  app.factory('MyFactory', function() {
    var myFactory = {};
    
    myFactory.myProperty = {prop: 'Hello'};
    myFactory.setProperty = function(value) {
      this.myProperty.prop = value;
    };
    return myFactory;
  });

  app.service('MyService', function() {
    this.myProperty = {prop: 'Test'};
    this.setProperty = function(value) {
      this.myProperty.prop = value;
    }
  });

  app.controller('DummyController', DummyController);
  DummyController.$Inject = ['$scope', 'MyFactory', 'MyService'];

  app.controller('Dummy1Controller', Dummy1Controller);
  Dummy1Controller.$Inject = ['$scope', 'MyFactory', 'MyService'];



  function DummyController($scope, MyFactory, MyService) {
    $scope.property = MyFactory.myProperty;
    $scope.property1 = MyService.myProperty;

  }

  function Dummy1Controller($scope, MyFactory, MyService) {
    MyFactory.setProperty('World1144');
    $scope.property = MyFactory.myProperty;

    MyService.setProperty('World1144');
    $scope.property1 = MyService.myProperty;
  }
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="script.js"></script>
</head>

<body ng-app='myApp'>
  <div class="container-fluid">

    
    <br />
    <div class="row">
      <div class="col-md-6">
        <div class="panel-group">
          <div class="panel panel-primary">
            <div class="panel-heading">Example [As a Service]</div>
            <div class="panel-body">
              <div ng-controller='DummyController' class='col-md-6'>
                <form class="form-inline" role="form">
                  DummyController
                  <div>
                    Current Factory Value :
                    <input type='text' ng-model='property.prop'>
                    <br> Current Service Value :
                    <input type='text' ng-model='property1.prop'>

                  </div>
                </form>
              </div>
              <hr>
              <div ng-controller='Dummy1Controller' class='col-md-6'>
                <form class="form-inline" role="form">
                  Dummy1Controller
                  <div>
                    Current Factory Value :
                    <input type='text' ng-model='property.prop'>
                    <br> Current Service Value :
                    <input type='text' ng-model='property1.prop'>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

以下是使用手动引导程序通过服务共享黑白控制器的数据代码 

// Code goes here

// Code goes here

// Code goes here

(function() {
  'use strict';

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

  app.factory('MyFactory', function() {
    var myFactory = {};
    
    myFactory.myProperty = {prop: 'Hello'};
    myFactory.setProperty = function(value) {
      this.myProperty.prop = value;
    };
    return myFactory;
  });

  app.service('MyService', function() {
    this.myProperty = {prop: 'Test'};
    this.setProperty = function(value) {
      this.myProperty.prop = value;
    }
  });

  app.controller('DummyController', DummyController);
  DummyController.$Inject = ['$scope', 'MyFactory', 'MyService'];

  app.controller('Dummy1Controller', Dummy1Controller);
  Dummy1Controller.$Inject = ['$scope', 'MyFactory', 'MyService'];



  function DummyController($scope, MyFactory, MyService) {
    $scope.property = MyFactory.myProperty;
    $scope.property1 = MyService.myProperty;

  }

  function Dummy1Controller($scope, MyFactory, MyService) {
    MyFactory.setProperty('World1144');
    $scope.property = MyFactory.myProperty;

    MyService.setProperty('World1144');
    $scope.property1 = MyService.myProperty;
  }

  
})();

setTimeout(function(){ 
    angular.bootstrap(document.querySelector(".c1"), ["myApp"])//manual bootstrapping of PaginationComp
    angular.bootstrap(document.querySelector(".c2"), ["myApp"])
}, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="script.js"></script>
</head>

<body >
  <div class="container-fluid">

    <br />
    <div class="row">
      <div class="col-md-6">
        <div class="panel-group">
          <div class="panel panel-primary">
            <div class="panel-heading">Example [As a Service]</div>
            <div class="panel-body">
              <div ng-controller='DummyController' class='col-md-6 c1'>
                <form class="form-inline" role="form">
                  DummyController
                  <div>
                    Current Factory Value :
                    <input type='text' ng-model='property.prop'>
                    <br> Current Service Value :
                    <input type='text' ng-model='property1.prop'>

                  </div>
                </form>
              </div>
              <hr>
              <div ng-controller='Dummy1Controller' class='col-md-6 c2'>
                <form class="form-inline" role="form">
                  Dummy1Controller
                  <div>
                    Current Factory Value :
                    <input type='text' ng-model='property.prop'>
                    <br> Current Service Value :
                    <input type='text' ng-model='property1.prop'>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

2 个答案:

答案 0 :(得分：0)

在此处查看AngularJS Bootstraping指南

https://docs.angularjs.org/guide/bootstrap

答案 1 :(得分：0)

这样做时：

setTimeout(function(){ 
    angular.bootstrap(document.querySelector(".c1"), ["myApp"])//manual bootstrapping of PaginationComp
    angular.bootstrap(document.querySelector(".c2"), ["myApp"])
}, 1000);

You have more than one AngularJS application instance on your page这就是为什么控制器之间不共享数据的原因，因为这些服务实例存在于不同的应用程序中。

您所要做的就是使用包含ngController directives的元素来引导应用程序，例如：

setTimeout(function(){ 
    angular.bootstrap(document.querySelector(".panel-body"), ["myApp"])
}, 1000);

工作小提琴：

＆＃13;
＆＃13; 
(function() {
  'use strict';

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

  app.factory('MyFactory', function() {
    var myFactory = {};
    
    myFactory.myProperty = {prop: 'Hello'};
    myFactory.setProperty = function(value) {
      this.myProperty.prop = value;
    };
    return myFactory;
  });

  app.service('MyService', function() {
    this.myProperty = {prop: 'Test'};
    this.setProperty = function(value) {
      this.myProperty.prop = value;
    }
  });

  app.controller('DummyController', DummyController);
  DummyController.$Inject = ['$scope', 'MyFactory', 'MyService'];

  app.controller('Dummy1Controller', Dummy1Controller);
  Dummy1Controller.$Inject = ['$scope', 'MyFactory', 'MyService'];



  function DummyController($scope, MyFactory, MyService) {
    $scope.property = MyFactory.myProperty;
    $scope.property1 = MyService.myProperty;

  }

  function Dummy1Controller($scope, MyFactory, MyService) {
    MyFactory.setProperty('World1144');
    $scope.property = MyFactory.myProperty;

    MyService.setProperty('World1144');
    $scope.property1 = MyService.myProperty;
  }

  
})();

setTimeout(function(){ 
    angular.bootstrap(document.querySelector(".panel-body"), ["myApp"])
}, 1000);
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body >
  <div class="container-fluid">
    <br />
    <div class="row">
      <div class="col-md-6">
        <div class="panel-group">
          <div class="panel panel-primary">
            <div class="panel-heading">Example [As a Service]</div>
            <div class="panel-body">
              <div ng-controller='DummyController' class='col-md-6 c1'>
                <form class="form-inline" role="form">
                  DummyController
                  <div>
                    Current Factory Value :
                    <input type='text' ng-model='property.prop'>
                    <br> Current Service Value :
                    <input type='text' ng-model='property1.prop'>

                  </div>
                </form>
              </div>
              <hr>
              <div ng-controller='Dummy1Controller' class='col-md-6 c2'>
                <form class="form-inline" role="form">
                  Dummy1Controller
                  <div>
                    Current Factory Value :
                    <input type='text' ng-model='property.prop'>
                    <br> Current Service Value :
                    <input type='text' ng-model='property1.prop'>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题