2016-08-01 86 views
0
<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> 

在上面的代碼中,使用工廠在兩個控制器之間傳遞值。現在我想使用按鈕單擊來更新名和姓。按鈕點擊功能在控制器之外(我要求)。現在如何訪問控制器外的更新myApp.factory.update(「Hello」,「.....」);這種說法不工作如何訪問控制器外部工廠的功能

回答

0

請閱讀服務的Angular documentation

要使用角度的服務,您可以添加它作爲組件(控制器,服務,過濾器或指令)的依賴性取決於服務。 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> 
相關問題