在Angular js中使用Services在控制器之間調用特定的功能代碼

Question

我有一個工廠，在其中保存要在各種控制器中重用的代碼。

當我在每個控制器上分別單擊ng並單擊它們時，其功能不起作用。

另外，有沒有更好的方法來處理這種情況？

視圖：

<body ng-app="MyApp">
    <div ng-controller="MyCtrl" ng-click='hidepop()'>
        <ul ng-repeat="user in users">
            <li>{{user}}</li>
        </ul>
        <div class="nested" ng-click='showpop()' ng-controller="AnotherCtrl">
        </div>
    </div>
</body>

控制器：

var app = angular.module("MyApp", []);

app.factory("UserService", function ($window) {    
    var root={};
    root.showpop = function () {     
        alert("f")
    }     
    root.hidepop = function () { 
        alert("d")
    }      
    return root;
});

app.controller("AnotherCtrl", function($scope,$location, UserService) {
    $scope.alerter = UserService;        
    $scope.showpop(){
        $scope.alerter.showpop();
    }
    $scope.alerter.hidepop();    
});

app.controller("MyCtrl", function($scope, UserService) {
    $scope.alerter = UserService;
    $scope.alerter.showpop();
    $scope.alerter.hidepop();
});

這是我的小提琴：小提琴鏈接

Answer 1

我對代碼進行了一些調整，以顯示一種可以使用已開始構建的服務的方法-http : //jsfiddle.net/p8LNR/2/ ：

HTML：

<body ng-app="MyApp">
    <div ng-controller="MyCtrl">
        <ul ng-repeat="user in users">
            <li>{{user}}</li>
        </ul>
        <div class="nested" ng-click=showpop() ng-controller="AnotherCtrl">
        </div>
    </div>
</body>

Javascript：

var app = angular.module("MyApp", []);

app.factory("UserService", function() {
    var users = ["Peter", "Daniel", "Nina"];
    var root={
        'showpop':function () { 
            alert("f")
        },
        'hidepop':function () { 
            alert("d")
         },
        'users': users
    };
    return root;
});

app.controller("AnotherCtrl", function($scope,$location, UserService) {
    $scope.showpop = function(){
        UserService.showpop();
    }
    $scope.hidepop = function(){
        UserService.hidepop();
    }
});

app.controller("MyCtrl", function($scope, UserService) {
  $scope.users = UserService.users
});

以下是有關您的代碼的一些建議：

我會給您的關鍵建議是退后一步，並記住您只是在構建javascript，而Angular只是使您的生活更輕松的工具。
具體來說，就服務而言，將“服務”視為一個精美的Javascript對象，該對象是在您第一次將其加載到代碼中的某個位置時創建的，並且具有持久性。
看來您正在開始構建可以修改DOM的東西（稱為popup），在這種情況下，您可能實際上想記住您可以使用html做很多事情，例如，創建“ pop-up”具有以下內容的窗口：
```
 <div ng-style="showpopup">{{ selected_user.name}}</div> 
```
如果您真的很喜歡您的代碼，則應考慮構建一個指令： http : //docs.angularjs.org/guide/directive
最后，這是個人喜好，但是我建議您對代碼進行格式化，以適當的間距和縮進來使代碼更整潔，更容易閱讀，以后更容易修復。 :)

在Angular js中使用Services在控制器之間調用特定的功能代碼

問題描述

1 個解決方案

解決方案1
0 2014-03-03 18:48:09

在Angular js中使用Services在控制器之間調用特定的功能代碼

問題描述

1 個解決方案

解決方案1 0 2014-03-03 18:48:09

解決方案1
0 2014-03-03 18:48:09