使用angular-rails-template gem的Ng范围问题

时间:2015-08-13 15:42:22

标签: javascript ruby-on-rails ruby angularjs

所以我使用角度轨道模板宝石,以便我的所有视图都可以是角度,但我得到一个奇怪的错误。我之前的这个人有同样的issue,但他们并没有真正为我解决。我已经重启了我的服务器三次,没有任何改变或改进。我希望问题只是我错过的一小部分。我希望,如果我提供所有信息,我可以帮助我解决问题。预先感谢您的帮助!

这是错误。 enter image description here

这是chrome dev工具中的代码。

 <html ng-app="planoxApp" class="ng-scope"><head><style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}</style>
  <title>PlanomaticPlanox2</title>
  <link rel="stylesheet" media="all" href="/assets/bootstrap/dist/css/bootstrap-dbbbca97c2bbaa173942d4281489e52f.css?body=1">
<link rel="stylesheet" media="all" href="/assets/static_pages-6d5d8811d0027e08fe46d86bf30c8766.css?body=1">
<link rel="stylesheet" media="all" href="/assets/application-2bb683376a024ac497c8a6ed6305cc12.css?body=1">
  <script src="/assets/jquery/dist/jquery-ba261596ffa80a71ab59381ea7dd96f4.js?body=1"></script><style type="text/css"></style>
<script src="/assets/bootstrap/dist/js/bootstrap-54b3f361138b446430a5c36b147ee6bd.js?body=1"></script>
<script src="/assets/angular/angular-bd1674de179777382eaa62905fa0241b.js?body=1"></script>
<script src="/assets/angular-rails-templates-53580c7b4a0ee4550188e6540b876bbc.js?body=1"></script>
<script src="/assets/angular-resource-911ad106aa18c275fb573b29b0d22827.js?body=1"></script>
<script src="/assets/angular-route-ad9ba91d075e9c84eede0ae2bf206173.js?body=1"></script>
<script src="/assets/angular/app-75cf60e7081859d3351adaf0967a024c.js?body=1"></script>
<script src="/assets/angular/controllers/homectrl-439d28867cb055507c0c9a144dee04aa.js?body=1"></script>
<script src="/assets/angular/templates/home-1eff16fa2ee0622ee2aa2cf9d97ecc98.js?body=1"></script>
<script src="/assets/angular/routes-f0ee7156fd3678dae622e3321529f274.js?body=1"></script>
<script src="/assets/application-444cb0172e5f0e7601b6786933fa66df.js?body=1"></script>
  <meta name="csrf-param" content="authenticity_token">
<meta name="csrf-token" content="DxpNe5E/1CUlu/XvBWpEy0VkCRqwFY+iIkgRWRwzBylyRxghD8iEOCRfj1SBj0OhqsUh5T/mwlMWW2ZQ9H4/ug==">
</head>
<body>

    <!-- ngView:  -->
<div ng-view="" class="ng-scope">
<span class="ng-scope">
// Angular Rails Template
    // source: app/assets/javascripts/angular/templates/home.html

    angular.module("templates").run(["$templateCache", function($templateCache) {
      $templateCache.put("angular/templates/home.html", "</span><h1 class="ng-scope"> Help! </h1><span class="ng-scope">")
    }]);

    </span>
</div>


    </body></html>

这是我的app.js文件

var planoxApp = angular.module('planoxApp', ['ngResource', 'ngRoute', 'client-directives','templates']);

这是我的route.js文件

(function() {
    var planoxApp = angular.module('client-directives', []);

    planoxApp.config(['$routeProvider', function ($routeProvider) {
        $routeProvider.when('/', {
            templateUrl: "assets/angular/templates/home.html",
            controller: 'homectrl'
        }).
            otherwise({
                redirectTo: '/'
            });
    }]);
})();

我的application.js文件

//= require jquery
//= require bootstrap
//= require angular/angular
//= require angular-rails-templates
//= require angular-resource
//= require angular-route
//= require angular/app
//= require_tree ./angular/controllers
//= require_tree ./angular/templates
//= require_tree .

这是我的宝石文件。

source 'https://rubygems.org'


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.2'
# Use mysql as the database for Active Record
gem 'mysql2'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.1.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby

# Use angular as the JavaScript library
gem 'bower-rails'
gem 'angular-rails-templates'
gem 'active_model_serializers', '~>0.8.0' #0.10.0 will be based on 0.8.x"
gem 'angular-ui-bootstrap-rails'
gem 'angularjs-rails'
gem 'sprockets', '2.12.3'


# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'

# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc

# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Unicorn as the app server
# gem 'unicorn'

# Use Capistrano for deployment
gem 'capistrano-rails', group: :development

gem 'rspec-rails'

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug'

  # Access an IRB console on exception pages or by using <%= console %> in views
  gem 'web-console', '~> 2.0'

  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
end

最后这是我的角度文件结构。

enter image description here

编辑:忘记添加我的home.html和Application.html.erb

<!DOCTYPE html>
<html ng-app="planoxApp">
<head>
  <title>PlanomaticPlanox2</title>
  <%= stylesheet_link_tag    'application', media: 'all' %>
  <%= javascript_include_tag 'application' %>
  <%= csrf_meta_tags %>
</head>
<body>

<div ng-view>

</div>
</body>
</html>

Home.html

<h1> Help! </h1>

0 个答案:

没有答案