未知提供者與AngularJS

我想在AngualrJS中創建服務和控制器。問題是我需要在我的服務中訪問$ scope。我認爲最好的解決方案是直接把這個服務放在控制器中，但我不知道該怎麼做。這是我的HTML：未知提供者與AngularJS

   <div ng-controller="myController"> 
        <input type="text" id="idInput" name="idInput" ng-model="nameModel"> 
        <button class="btn btn-default" ng-click="functionWhenClick()">Execute</button> 
       </div>

這是我的控制器：

var variableModuleName = angular.module("nameModule",[]); 
variableModuleName.controller('controllerName',function($rootScope,$scope, CommonService) { 
    $scope.nameModel = ''; 
    $scope.scopeFunctionName = function() { 
     CommonService.myFunction($scope.nameModel); 
    }; 
});

這是我的服務：

variableModuleName.service('CommonService', ['dataService', function(dataService) { 
    this.loadData = function(param) { 
     dataService.getCommitData(param).then(function(res) { 
      if (res.error) { 
       $scope.chartData = res.chartData; 
      } 
     }); 
    }; 

    this.myFunction = function(concatURL){ 
     this.loadData('URL' + concatURL); 
    } 
}]);

我希望你能幫助我。謝謝。

來源

2016-05-17 Anonyme

服務的優點是您可以將您的服務對象分享給任何控制器，只要服務注入到該控制器。而不是使用$ scope.charData，嘗試定義this.charData =''; – mtamma

作爲一個sidenode，你的代碼看起來有點搞砸了，試試John Pappa的styleguide： https://github.com/johnpapa/angular-styleguide/tree/master/a1 – Baki

首先不要在您的文件中使用var d3DemoApp = angular.module("D3demoApp",[])。

使用angular.module("D3demoApp",[])一次，讓你的模塊實例化，然後開始使用angular.module("D3demoApp")

在你plknr在現有的參考：

你忘了，包括服務文件
我不請參閱dataService的任何定義，這就是爲什麼您有unknown provider dataServiceProvider error。

來源

2016-05-17 14:11:42 Walfrat

-1

服務

d3DemoApp.service('CommonService', ['dataService', function(dataService) { 
    this.chartData = ''; 

    this.loadData = function(param) { 
     dataService.getCommitData(param).then(function(res) { 
      if (!res.error) { 
       this.chartData = res.chartData; 
      } 

     }); 
    }; 

    this.myFunction = function(parameterItem){ 
     this.loadData('http://localhost:3412/bubble/' + parameterItem); 
     console.log("Fonction appellée"); 
    } 
}]);

控制器

var d3DemoApp = angular.module("D3demoApp",[]); 
d3DemoApp.controller('controllerFilterSearch',function($rootScope,$scope, CommonService) { 
    $scope.searchText = ''; 
    $scope.getSearchText = function() { 
     CommonService.myFunction($scope.searchText); 
     $scope.searchText = CommonService.chartData; 
    }; 
});

來源

2016-05-17 14:15:43 mtamma

有很多方法可以做到這一點。我最喜歡的是創建另一個服務，參考範圍。

d3DemoApp.service('scopeServer', ['dataService', function(dataService) { 

    var scope; 

    return { 
     scope: function(_scope) { 
      if (typeof _scope !== 'undefined') 
       scope = _scope; 

      return scope; 
     } 
    } 

}]);

此服務，無論你叫scopeService.scope();

開始，您可以設置在控制器範圍內保持對範圍的引用在一個單獨的回報吧。

d3DemoApp.controller('controllerFilterSearch',function($rootScope,$scope, scopeServer) { 

    scopeServer.scope($scope); 

});

來源

2016-05-17 14:16:32

<!DOCTYPE html> 
<html> 

    <head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> 
    <script src="controllerInput.js"></script> 
    <script src="app.js"></script> 
    <script src="serviceInput.js"></script> <!-- Include --> 
    </head> 

    <body ng-app="D3demoApp" ng-controller="controllerFilterSearch"> 
    <input type="text" id="searchTextBox" name="searchTextBox" ng-model="searchText"> 
    <button class="btn btn-default" ng-click="getSearchText()">Rechercher</button> 
    </body> 

</html>

var d3DemoApp = angular.module("D3demoApp",[]); 
d3DemoApp.controller('controllerFilterSearch',function($rootScope,$scope, CommonService) { 
    $scope.searchText = ''; 
    $scope.getSearchText = function() { 
     CommonService.myFunction($scope.searchText); 
    }; 
});

來源

2016-05-17 14:25:45

你是否到達過Plunker的作品？您可以只是把一個警報loadData的正文... – Anonyme

首先，你不能/不應該在服務中使用$scope。您不能在服務中注入$scope。您可以將$scope作爲函數的參數傳遞，但這不是一個好主意。因爲我們不希望我們的服務使用我們所有的$scope變量。現在，要重寫您的服務以使用dataService從異步操作返回chartData（假設dataService.getCommitData(param)確實有對服務器的調用），您需要很好地處理該承諾。

var d3DemoApp = angular.module("D3demoApp",[]); 

// service. Assuming dataService exists 
d3DemoApp.service('CommonService', ['dataService', function(dataService) { 
    this.loadData = function(param) { 
     return dataService.getCommitData(param).then(function(res) { 
      // Should the if condition be res.error or !res.error 
      if (res.error) { 
       return res; 
      } 
     }); 
    }; 

    this.myFunction = function(parameterItem){ 
     return this.loadData('http://localhost:3412/bubble/' + parameterItem); 
     console.log("Fonction appellée"); 
    } 
}]); 

// controller 
d3DemoApp.controller('controllerFilterSearch',function($rootScope,$scope, CommonService) { 
    $scope.searchText = ''; 
    $scope.getSearchText = function() { 
     CommonService.myFunction($scope.searchText).then(function(res) { 
      $scope.chartData = res.chartData; 
     }); 
    }; 
});

所以，在上面的代碼中，我基本上是從this.loadData函數返回一個承諾。當我們從控制器調用CommonService.myFunction時，我們得到了解決回調函數then中的響應，並且我們將chartData設置爲響應$scope.chartData。

來源

2016-05-17 14:38:58 Saad

你好，我有錯誤CommonService沒有在我的controllerBubble上定義：'CommonService.myFunction（$ scope.searchText）;' – Anonyme

您是否在控制器中注入了'CommonService'你的申請？另外，請檢查是否存在任何錯字錯誤。 – Saad

是的，你是否來製作作品Plunker？你可以把一個警報給loadData的主體... – Anonyme

未知提供者與AngularJS

回答

相關問題