AngularJS |沒有錯誤，但我的依賴注入不起作用

我一直無法找到我的問題的任何答案。AngularJS |沒有錯誤，但我的依賴注入不起作用

總之，我試圖通過使我的指令在「directives.js」文件訪問，我在「controllers.js」文件控制器來實現依賴注入。

即使在我「controllers.js」文件時，我的模塊，並沒有別的加剛方括號，

(function() { 
 
\t 'use strict'; 
 

 
\t angular 
 
\t \t .module('blogApp', ['file-directives']) 
 
\t \t // Career Controller 
 
\t \t .controller('CareerCtrl', function ($scope, $http, $location, $routeParams) { 
 
\t \t \t $scope.getCareers = function() { 
 
\t \t \t \t $http.get('/career').then(function (response) { 
 
\t \t \t \t \t $scope.careers = response.data; 
 
\t \t \t \t }); 
 
\t \t \t }; 
 
\t \t 
 
\t \t \t $scope.getCareer = function() { 
 
\t \t \t \t var id = $routeParams.id; 
 
\t \t \t \t $http.get('/career/' + id).then(function (response) { 
 
\t \t \t \t \t $scope.career = response.data; 
 
\t \t \t \t }); 
 
\t \t \t }; 
 
\t \t 
 
\t \t \t $scope.addCareer = function() { 
 
\t \t \t \t $http.post('/career', $scope.career).then(function (response) { 
 
\t \t \t \t \t window.location.href = '#!/career'; 
 
\t \t \t \t }); 
 
\t \t \t }; 
 

 
\t \t \t $scope.updateCareer = function() { 
 
\t \t \t \t var id = $routeParams.id; 
 
\t \t \t \t $http.put('/career/' + id, $scope.career).then(function (response) { 
 
\t \t \t \t \t window.location.href = '#!/career'; 
 
\t \t \t \t }); 
 
\t \t \t }; 
 

 
\t \t \t $scope.removeCareer = function (id) { 
 
\t \t \t \t $http.delete('/career/' + id).then(function (response) { 
 
\t \t \t \t \t window.location.href = '#!/career'; 
 
\t \t \t \t }); 
 
\t \t \t }; 
 
\t \t }) 
 
\t \t 
 
\t \t // Lifestyle Controller 
 
\t \t .controller('LifestyleCtrl', function ($scope, $http, $location, $routeParams) { 
 
\t \t \t $scope.getLifestyles = function() { 
 
\t \t \t \t $http.get('/lifestyle').then(function (response) { 
 
\t \t \t \t \t $scope.lifestyles = response.data; 
 
\t \t \t \t }); 
 
\t \t \t }; 
 

 
\t \t \t $scope.getLifestyle = function() { 
 
\t \t \t \t var id = $routeParams.id; 
 
\t \t \t \t $http.get('/lifestyle/' + id).then(function (response) { 
 
\t \t \t \t \t $scope.lifestyle = response.data; 
 
\t \t \t \t }); 
 
\t \t \t }; 
 

 
\t \t \t $scope.addLifestyle = function() { 
 
\t \t \t \t $http.post('/lifestyle', $scope.lifestyle).then(function (response) { 
 
\t \t \t \t \t window.location.href = '#!/lifestyle'; 
 
\t \t \t \t }); 
 
\t \t \t }; 
 

 
\t \t \t $scope.updateLifestyle = function() { 
 
\t \t \t \t var id = $routeParams.id; 
 
\t \t \t \t $http.put('/lifestyle/' + id, $scope.lifestyle).then(function (response) { 
 
\t \t \t \t \t window.location.href = '#!/lifestyle'; 
 
\t \t \t \t }); 
 
\t \t \t }; 
 

 
\t \t \t $scope.removeLifestyle = function (id) { 
 
\t \t \t \t $http.delete('/lifestyle/' + id).then(function (response) { 
 
\t \t \t \t \t window.location.href = '#!/lifestyle'; 
 
\t \t \t \t }); 
 
\t \t \t }; 
 
\t \t }) 
 
\t 
 
\t \t // Travel Controller 
 
\t \t .controller('TravelCtrl', function ($scope, $http, $location, $routeParams) { 
 
\t \t \t $scope.getTravels = function() { 
 
\t \t \t \t $http.get('/travel').then(function (response) { 
 
\t \t \t \t \t $scope.travels = response.data; 
 
\t \t \t \t }); 
 
\t \t \t }; 
 

 
\t \t \t $scope.getTravel = function() { 
 
\t \t \t \t var id = $routeParams.id; 
 
\t \t \t \t $http.get('/travel/' + id).then(function (response) { 
 
\t \t \t \t \t $scope.travel = response.data; 
 
\t \t \t \t }); 
 
\t \t \t }; 
 

 
\t \t \t $scope.addTravel = function() { 
 
\t \t \t \t $http.post('/travel', $scope.travel).then(function (response) { 
 
\t \t \t \t \t window.location.href = '#!/travel'; 
 
\t \t \t \t }); 
 
\t \t \t }; 
 

 
\t \t \t $scope.updateTravel = function() { 
 
\t \t \t \t var id = $routeParams.id; 
 
\t \t \t \t $http.put('/travel/' + id, $scope.travel).then(function (response) { 
 
\t \t \t \t \t window.location.href = '#!/travel'; 
 
\t \t \t \t }); 
 
\t \t \t }; 
 

 
\t \t \t $scope.removeTravel = function (id) { 
 
\t \t \t \t $http.delete('/travel/' + id).then(function (response) { 
 
\t \t \t \t \t window.location.href = '#!/travel'; 
 
\t \t \t \t }); 
 
\t \t \t }; 
 
\t \t }) 
 
\t 
 
\t \t // Main Page Controller 
 
\t \t .controller('MainCtrl', function ($scope, $http, $location, $routeParams) { 
 
\t \t \t $scope.getCareers = function() { 
 
\t \t \t \t $http.get('/career').then(function (response) { 
 
\t \t \t \t \t $scope.careers = response.data; 
 
\t \t \t \t }); 
 
\t \t \t }; 
 

 
\t \t \t $scope.getLifestyles = function() { 
 
\t \t \t \t $http.get('/lifestyle').then(function (response) { 
 
\t \t \t \t \t $scope.lifestyles = response.data; 
 
\t \t \t \t }); 
 
\t \t \t }; 
 

 
\t \t \t $scope.getTravels = function() { 
 
\t \t \t \t $http.get('/travel').then(function (response) { 
 
\t \t \t \t \t $scope.travels = response.data; 
 
\t \t \t \t }); 
 
\t \t \t }; 
 
\t \t }); 
 
}()); 
 

 

 

 
(function() { 
 
    'use strict'; 
 

 
    angular 
 
    .module('file-directives', []) 
 
    .directive('fileModel', ['$parse', function ($parse) { 
 
     return { 
 
     restrict: 'A', 
 
     link: function (scope, element, attrs) { 
 
      var parsedFile = $parse(attrs.fileModel); 
 
      var parsedFileSetter = parsedFile.assign; 
 
      
 
      element.bind('change', function() { 
 
      scope.apply(function() { 
 
       parsedFileSetter(scope, element[0].files[0]); 
 
      }); 
 
      }); 
 
     } 
 
     }; 
 
    }]); 
 
}());

<!DOCTYPE html> 
 
<html lang="en" ng-app="blogApp"> 
 

 
\t <head> 
 
\t \t <meta charset="utf-8"> 
 
\t \t <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
\t \t <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
\t \t <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
 
\t \t <title>Shelby Cherie</title> 
 

 
\t \t <!-- Bootstrap --> 
 
\t \t <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
\t \t <link rel="stylesheet" href="css/main.css"> 
 
\t \t <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
 
\t \t <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
 
\t \t <!--[if lt IE 9]> 
 
\t <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 
 
\t <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
 
\t <![endif]--> 
 
\t </head> 
 

 
\t <body> 
 

 
\t \t <header> 
 
\t \t \t <nav class="navbar navbar-default"> 
 
\t \t \t \t <div class="container-fluid"> 
 
\t \t \t \t \t <div class="navbar-header"> 
 
\t \t \t \t \t \t <a class="navbar-brand" href="#!/">Shelby Cherie</a> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <ul class="nav navbar-nav navbar-right"> 
 
\t \t \t \t \t \t <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> 
 
\t \t \t \t \t \t <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </div> 
 
\t \t \t </nav> 
 
\t \t </header> 
 

 
\t \t <div id="main"> 
 
\t \t \t <div class="container"> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="col-md-3"> 
 
\t \t \t \t \t \t <aside> 
 
\t \t \t \t \t \t \t <ul class="nav nav-pills nav-stacked side-menu"> 
 
\t \t \t \t \t \t \t \t <li><a href="#!/career">career</a></li> 
 
\t \t \t \t \t \t \t \t <li><a href="#!/lifestyle">lifestyle</a></li> 
 
\t \t \t \t \t \t \t \t <li><a href="#!/travel">travel</a></li> 
 
\t \t \t \t \t \t \t \t <li><a href="#!/about">about me</a></li> 
 
\t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t </aside> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div ng-view></div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t \t <footer> 
 
\t \t \t <div class="container"> 
 
\t \t \t \t <div class="social-media text-center"> 
 
\t \t \t \t \t <ul class="list-inline"> 
 
\t \t \t \t \t \t <li><span class="glyphicon glyphicon-user" aria-hidden="true"></span></li> 
 
\t \t \t \t \t \t <li><span class="glyphicon glyphicon-user" aria-hidden="true"></span></li> 
 
\t \t \t \t \t \t <li><span class="glyphicon glyphicon-user" aria-hidden="true"></span></li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="sub-footer"> 
 
\t \t \t \t \t <p>Website Developed by <a href="#">Derek Hawkins Design</a></p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </footer> 
 

 

 
\t \t <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
\t \t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
\t \t <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script> 
 
\t \t <script src="https://code.angularjs.org/1.6.4/angular-route.js"></script> 
 
\t \t <script src="https://code.angularjs.org/1.6.4/angular-parse-ext.js"></script> 
 
\t \t <script type="text/javascript" src="routes/routes.js"></script> 
 
\t \t <script type="text/javascript" src="controllers/controllers.js"></script> 
 
\t \t <script type="text/javascript" src="directives/directives.js"></script> 
 
\t \t <!-- Include all compiled plugins (below), or include individual files as needed --> 
 
\t \t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
\t </body> 
 

 
</html>

我的網頁將是完全空白沒有錯誤。

controllers.js

angular 
    .module('blogApp', ['file-directives']) 
    // Career Controller 
    .controller('CareerCtrl', function ($scope, $http, $location, $routeParams) { 
     $scope.getCareers = function() { 
      $http.get('/career').then(function (response) { 
       $scope.careers = response.data; 
      }); 
     };

directives.js

angular 
    .module('file-directives') 
    .directive('fileModel', ['$parse', function ($parse) { 
     return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
     var parsedFile = $parse(attrs.fileModel); 
     var parsedFileSetter = parsedFile.assign; 

     element.bind('change', function() { 
      scope.apply(function() { 
      parsedFileSetter(scope, element[0].files[0]); 
     }); 
     }); 
    } 
    }; 
    }]); 
}());

來源

2017-05-28 D. Hawkins

可以請你做它的jsfiddle運行你錯過了方括號？把你的模塊和控制器和指令放在jsfiddle中，它會好得多。 – Maher

你可以發佈你的html代碼嗎？可能在jsfiddle或plunkr – Sreekumar

我剛剛添加完整的controllers.js和directives.js文件，以及index.html文件。 –

我認爲你不能加載在controller.js ngRoute模塊

controller.js

個

angular.module('blogApp', ['ngRoute','file-directives']) 
// Career Controller 
.controller('CareerCtrl',function ($scope, $http, $location, $routeParams) { 
    $scope.getCareers = function() { 
     $http.get('/career').then(function (response) { 
      $scope.careers = response.data; 
     }); 
    } 
});

directives.js

angular.module('file-directives',[]) 
    .directive('fileModel', ['$parse', function ($parse) { 
     return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
     var parsedFile = $parse(attrs.fileModel); 
     var parsedFileSetter = parsedFile.assign; 

      element.bind('change', function() { 
        scope.apply(function() { 
         parsedFileSetter(scope, element[0].files[0]); 
        }); 
      }); 
     } 
     }; 
    }]);

來源

2017-05-28 05:33:34 HARI

我在另一個routes.js文件中加載了ngRoute依賴項。 –

聲明時「文件指令」

angular 
    .module('file-directives',[])

來源

2017-05-28 07:42:43

每當我添加依賴括號時，我的屏幕變爲空白。當我不添加依賴括號時，我的網站工作。 –

嘗試檢查在Chrome控制檯中是否有運行時錯誤 –

沒有運行時錯誤。請原諒我的無知，但在運行時錯誤中意義何在？ –

AngularJS |沒有錯誤，但我的依賴注入不起作用

回答

相關問題