Question

<html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <body>
    <div ng-app="myApp">

        <div ng-controller="FirstCtrl">
  firstname:<input type="text" ng-model="data.firstName">
  lastname:<input type="text" ng-model="data.lastName">
  <br>name is : <strong>{{data.firstName}}&nbsp;{{data.lastName}}</strong>
</div>

<div ng-controller="SecondCtrl">
  name in 2nd controller: {{data.firstName}}&nbsp;{{data.lastName}}
  <button ng-click="updateData('kv','a')">click</button>
</div>
<button onclick = "ChangeEvn()"/>
    </div>
    <script>
var myApp = angular.module("myApp", []);
    myApp.factory('MyService', function(){
      return {
        data: {
          firstName: '',
          lastName: ''
        },
        update: function(first, last) {
          this.data.firstName = first;
          this.data.lastName = last;
        }
      };
    });

myApp.controller('FirstCtrl', function($scope, MyService){
  $scope.data = MyService.data;
});
myApp.controller('SecondCtrl', function($scope, MyService){
   $scope.data = MyService.data;
   $scope.updateData = function(first, last) {
     MyService.update(first, last);
   }
});


function ChangeEvn() 
{
  alert("Ok");
  myApp.factory.update("Hello", ".....");//doesn't work
}
    </script>

   </body>
</html>

在上面的代码中，使用factory在两个控制器之间传递值。现在我想使用按钮点击更新名字和姓氏。按钮点击功能在控制器外面（我要求）。现在如何访问控制器外的更新myApp.factory.update（“Hello”，“.....”）;这句话不起作用

Answer 1

请阅读Angular documentation服务：

要使用Angular服务，请将其添加为依赖于服务的组件（控制器，服务，过滤器或指令）的依赖项。 Angular的依赖注入子系统负责其余部分。

您正尝试访问角度组件之外的服务方法。如果可能的话，根本不建议这样做。如果您正在使用角度，请尝试“在Angular子系统内”执行所有操作。试图绕过角度上下文只会导致问题，而根本不需要它。

如果你想使用服务方法，那么创建一个MainController，在其中注入服务，将控制器附加到某个HTML元素，并将更新按钮作为该元素的子元素。

<body>
    <div ng-app="myApp">

        <div ng-controller="MainCtrl">
            <button onclick="updateData('FirstName', 'LastName')" />
        </div>

    </div>
    <script>
        var myApp = angular.module("myApp", []);
        myApp.factory('MyService', function () {
            return {
                data: {
                    firstName: '',
                    lastName: ''
                },
                update: function (first, last) {
                    this.data.firstName = first;
                    this.data.lastName = last;
                }
            };
        });

        myApp.controller('MainCtrl', function($scope, MyService) {
            $scope.updateData = MyService.update;
        });

    </script>
</body>

如何在工厂外部控制器访问功能

1 个答案: