ajax加载内容中的角度控制器

时间:2014-03-16 17:37:47

标签: javascript jquery ajax angularjs

我在我的项目下有这个文件,我遇到一些麻烦用ajax加载它们并应用angular,这里是plunk: http://plnkr.co/MxXzlenAuGcDy8iljKYX

问题是 sidebar.html 的内容被加载并且控制器被正确执行但是对于 products.html ,内容只会被加载并且控制器不会被加载被执行。 我在chrome下使用它,我的localhost控制台没有任何错误

1 个答案:

答案 0 :(得分:1)

我整理了你的plnkr的一个修改版本,以展示我将如何通过Angular处理这个问题并删除jQuery,因为它不是必需的:

http://plnkr.co/edit/QgPUk1JMP1vaWtwgXGbw

HTML

<!DOCTYPE html>
<html>

  <head>
    <title></title>
    <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.14/angular.js" data-semver="1.2.14"></script>
    <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.14/angular-route.js" data-semver="1.2.14"></script>
    <script type="text/javascript" src="script.js"></script>
    <script type="text/javascript" src="category.js"></script>
    <script type="text/javascript" src="products.js"></script>
  </head>

  <body ng-app="myApp">
    <div ng-include="'sidebar.html'"></div>
    <div ng-view></div>
  </body>

</html>

JS

// Code goes here
var app = angular.module("myApp" , ["ngRoute"]);

app.config(function($routeProvider){
  $routeProvider
    .when("/products/:prodId",{templateUrl:"products.html"})
    .when("/products",{templateUrl:"products.html"})
    .when("/", {templateUrl:"home.html"})
    .otherwise({redirectTo:"/"});
  })