Question

我正在尝试使用gulp和browserjs与浏览器同步来设置项目。当我在index.html文件中使用ng-view标记时，无法使浏览器同步正常工作。这是我在浏览器同步时在浏览器控制台中遇到的错误： Uncaught TypeError: Cannot read property 'data1457531805746' of null 来自browser-sync-client.2.11.1.js:204它正常工作，页面加载正常，当不使用ng-view / ngRoute时。

这些是我的档案： ./gulpfile.js

// Spin up a server
gulp.task('browserSync', function() {
  browserSync.use(spa({
  selector: "[ng-app]" //Only needed for angular apps
  }));

  browserSync.init({
    port: 8080,
    server: {
      baseDir: path.src
    }
  })
});

 // Watch for changes in files
 gulp.task('watch', ['browserSync'], function() {
    // Watch .js files -- removed for brevity
  });
 // Default Task
gulp.task('default', ['watch']);

./应用程序/控制器/ controllers.js 'use strict';

/* Controllers */

var dc4SearchControllers = angular.module('dc4SearchControllers', []);

dc4SearchControllers.controller('CompanySearchCtrl', ['$scope', '$http',
  function($scope, $http){
    $scope.test = 'Hello, world!';
}]);

./应用/ index.html中

<html ng-app="dc4SearchApp">
<head>
  <link href="/bower_components/webui-core/dist/webui-core.min.css" rel="stylesheet">
  <script src="/bower_components/jquery/dist/jquery.min.js"></script>
  <script src="/bower_components/angular/angular.min.js"></script>
  <script src="/bower_components/angular-route/angular-route.min.js">    </script>
  <script src="/bower_components/lodash/lodash.min.js"></script>
  <script src="/bower_components/webui-core/dist/webui-core.min.js"></script>
  <script src="app.js"></script>
  <script src="controllers/controllers.js"></script>
</head>
<body ng-view>

</body>
</html>

./应用程序/ app.js 'use strict';

/* App Module */

var dc4SearchApp = angular.module('dc4SearchApp', [
  'ngRoute',
  'dc4SearchControllers'
]);

dc4SearchApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/company-search', {
        templateUrl: 'views/company-search.html',
        controller: 'CompanySearchCtrl'
      }).
      otherwise({
        redirectTo: '/company-search'
      });
  }]);

./应用/视图/公司search.html

<div ng-controller="CompanySearchCtrl">
  <a href="#" class="button confirm">{{test}}</a>
  <div class="spinner spin"> </div>
</div>

我希望这只是一些愚蠢而且容易的东西，我看起来还没有尝试过！提前谢谢。

Answer 1

“Browsersync通过在初始请求期间在body标记之后注入异步脚本标记来工作。为了使其正常工作，必须存在body标记。或者，您可以使用snippetOptions为代码段提供自定义规则” https://www.npmjs.com/package/browser-sync

似乎Browsersync正在重新加载body标签。您是否尝试将ng-view移动到另一个子div？

Gulp，浏览器同步不适用于angularjs ng-view

1 个答案: