-3

今、私は質問にコードを追加しました。controllers.js services.js

このエラーが発生します。angular.js:13642 エラー: [$injector:unpr] http://errors.angularjs.org/1.5.6/ $injector/unpr?p0=%24scopeProvider%20%3C-%20%24scope%20%3C- %20CF at angular.js:38 at angular.js:4501 at Object.d [as get] (angular.js:4654) at angular.js:4506 at d (angular.js:4654) at e (angular.js) :4678) Object.invoke (angular.js:4700) で Object.$get (angular.js:4547) で Object.invoke (angular.js:4708) で angular.js:4507

'use strict';
angular.module("carsApp")
  .controller("carsController", ["$scope", "CF",
    function($scope, CF) {
      $scope.tab = 1;
      $scope.filterTxt = '';
      $scope.showDetails = false;
      $scope.cars = CF.getCars();
      $scope.selectMenu = function(setTab) {
        $scope.tab = setTab;
        if (setTab === 2) {
          $scope.filterTxt = "BMW";
        } else if (setTab === 3) {
          $scope.filterTxt = "HONDA";
        } else if (setTab === 4) {
          $scope.filterTxt = "TOYOTA";
        } else {
          $scope.filterTxt = "";
        }
      }
      $scope.isSelected = function(val) {
        return ($scope.tab === val);
      }
      $scope.toggleDetails = function() {
        $scope.showDetails = !$scope.showDetails;
      }
    }
  ]);

//Sser 
angular.module("carsApp")
  .factory("CF", function($scope) {
    var carFact = {};
    $scope.cars = [{
      id: '1',
      make: 'BMW',
      name: 'BMW',
      image: 'images/bmw/bmw1.png',
      model: '2005',
      price: '4500',
      description: 'A very nice maintained car. Good road grip, no work required. Next inspection March 2017',
      comment: ''
    }, {
      id: '2',
      make: 'HONDA',
      name: 'Civic',
      image: 'images/honda/honda1.png',
      model: '2016',
      price: '25000',
      description: 'Honda is a nice car. Good road grip, no work required. Next inspection March 2017',
      comment: ''
    }, ];
    carFact.getCars = function() {
      return cars;
    };

    carFact.getCar = function(index) {
      return cars[index];
    };
    return carFact;
  });

4

1 に答える 1

0

ファクトリ プロバイダーには、コントローラーと同じ意味で、スコープ変数の概念がありません。必要に応じて、別の値をそのファクトリに注入できます。例:

angular.module('carsApp', [])
.value('topCarId','1')
.factory('CF', ['topCarId',function(topCarId) {
      //this factory provider can utilize topCarId 
});

これは、ユーザーが車を選択するように求められる簡単な例です。ngOptionsを使用して車を選択リストに追加しますが、おそらくコードにはボタンまたはその他の要素でselectMenu()への呼び出しがあります。

angular.module('carsApp', [])
  .factory('CF', function() {
    var cars = [{
      id: '1',
      make: 'BMW',
      name: 'BMW',
      description: 'A very nice maintained car...'
    }, {
      id: '2',
      make: 'Honda',
      name: 'Civic',
      description: 'Honda is a nice car...'
    },
{
      id: '3',
      make: 'Toyota',
      name: 'Camry',
      description: 'Toyota is a nice car...'
    }];
    return {
      getCars: function() {
        return cars;
      }
    };
  })
  .controller('carsController', ['$scope', 'CF',
    function($scope, CF) {
      $scope.cars = CF.getCars();
      $scope.filterTxt = '';
      $scope.tab = 0;
      $scope.car = {};
      $scope.selectMenu = function(setTab) {
        $scope.tab = setTab;
        $scope.filterTxt = $scope.car.make;
      }
    }
  ]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="carsApp" ng-controller="carsController">
  Choose a car: <select ng-model="car" ng-options="car as car.name for car in cars track by car.id" ng-change="selectMenu(car.id)"></select>
  
  <div>FilterTxt: <span ng-bind="filterTxt"></span></div>
  <div>Tab: <span ng-bind="tab"></span></div>
</div>

于 2016-12-21T21:52:53.263 に答える