Question

我是angularJs和rails的新手，我正在尝试使用＆＃34; templateUrl＆＃34;从指令渲染模板。如下： carts.js

angular.module("cart", [])
.factory("cart", function () {
var cartData = [];
return {
    addProduct: function (id, name, price) {
        var addedToExistingItem = false;
        for (var i = 0; i < cartData.length; i++) {
            if (cartData[i].id == id) {
                cartData[i].count++;
                addedToExistingItem = true;
                break;
            }
        }
        if (!addedToExistingItem) {
            cartData.push({
                count: 1, id: id, price: price, name: name
            });
        }
    },
    removeProduct: function (id) {
    for (var i = 0; i < cartData.length; i++) {
        if (cartData[i].id == id) {
            cartData.splice(i, 1);
            break;
        }
    }
},
getProducts: function () {
    return cartData;
}
}
})
 .directive("cartSummary", function (cart) {
   return {
      restrict: "E",
      templateUrl: "templates/cart.html",
      controller: function ($scope) {
         var cartData = cart.getProducts();
         $scope.total = function () {
            var total = 0;
            for (var i = 0; i < cartData.length; i++) {
                total += (cartData[i].price * cartData[i].count);
            }
            return total;
         }
         $scope.itemCount = function () {
            var total = 0;
            for (var i = 0; i < cartData.length; i++) {
                total += cartData[i].count;
            }
            return total;
         }
     }
   };
 });

资产/模板/ cart.html

<style>
 .navbar-right { float: right !important; margin-right: 5px;}
  .navbar-text { margin-right: 10px; }
</style>
<div class="navbar-right">
 <div class="navbar-text">
  <b>Your cart:</b>
  {{itemCount()}} item(s),
  {{total() | currency}}
 </div>
 <a class="btn btn-default navbar-btn">Checkout</a>
</div>

并在aplication.html.erb中添加了thois line

<cart-summary />

但我没有将显示的数据导入cart.html

那么我应该把什么放入templateUrl？

Answer 1

我建议不要在Rails Asset管道下放置视图模板。您只需要考虑许多路由和加载问题。

相反，我会（这是我的开发组所做的）创建一个TemplatesController来提供视图模板。基本上，如果需要，您只需要show操作（以及根路由index）。

<强> templates_controller.rb

class TemplatesController < ApplicationController
    def index
    end

    def show
        render "templates/#{params[:path]}", layout: nil
    end
end

<强>的routes.rb

Rails.application.routes.draw do
    get 'templates/*path' => 'template#show'
    # ... other routes ...
end

您的模板现在将由Rails控制器提供。

附录：

抱歉，这很糟糕，特别是对于指令：

<style>
    .navbar-right { float: right !important; margin-right: 5px;}
    .navbar-text { margin-right: 10px; }
</style>

如果您需要向指令模板内的元素添加样式，并且您不想将其放在外部css文件中，请通过link函数添加样式：

link: function(scope, el, attr) {
    el.find('.navbar-right').css({float: "right !important", margin-right: "5px"});
    el.find('.navbar-text').css("margin-right", "10px")
}

templateUrl angularJs Rails4

1 个答案: