ngBind-Html w / JSON文件

时间:2015-11-26 13:32:10

标签: angularjs json ng-bind-html

我正在调整Up&来自Lynda.com的Angularjs视频。目前我正在尝试将ng-bind-html与ngSanitize功能结合使用,这样我就可以将HTML代码保存在JSON文件中。这是我当前的页面,我不知道如何展示它们。

HTML-文件

  <script src="lib/angular/angular.min.js"></script>
  <script src="lib/angular/angular-route.min.js"></script>
  <script src="lib/angular/angular-animate.min.js"></script>
  <script src="lib/angular/angular-sanitize.min.js"></script>

  <script src="js/app.js"></script>
  <script src="js/controllers.js"></script>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main" ng-view></div>
</body>

App.js

var myApp = angular.module('myApp', [
  'ngRoute',
  'anatomyControllers'
]);

myApp.config(['$routeProvider', function($routeProvider) {
  $routeProvider.
when('/list', {
  templateUrl: 'partials/list.html',
  controller: 'ListController'
}).
when('/details/:itemId', {
  templateUrl: 'partials/details.html',
  controller: 'DetailsController'
}).
otherwise({
  redirectTo: '/list'
 });
}]);

controller.js

var anatomyControllers = angular.module('anatomyControllers', ['ngAnimate',        'ngSanitize']);

anatomyControllers.controller('ListController', ['$scope', '$http',    function($scope, $http) {
  $http.get('js/data2.json').success(function(data) {
    $scope.anatomy = data;
    $scope.anatomyOrder = 'name';
   });
}]);

anatomyControllers.controller('DetailsController', ['$scope',     '$http','$routeParams', function($scope, $http, $routeParams) {
  $http.get('js/data2.json').success(function(data) {
    $scope.anatomy = data;
    $scope.whichItem = $routeParams.itemId;

    if ($routeParams.itemId > 0) {
      $scope.prevItem = Number($routeParams.itemId)-1;
    } else {
      $scope.prevItem = $scope.anatomy.length-1;
    }

    if ($routeParams.itemId < $scope.anatomy.length-1) {
      $scope.nextItem = Number($routeParams.itemId)+1;
    } else {
      $scope.nextItem = 0;
    }

  });
}]); 

视图

<div class="bio">
    <h3>Structure</h3>
      <p ng-bind-html="{{anatomy[whichItem].structure}}"></p>
  </br>
    <h3>Nerve</h3>{{anatomy[whichItem].nerve}}
  </br>
    <h3>Action</h3>{{anatomy[whichItem].action}}
  </div>

目前神经,动作是可见的,但结构没有出现。它是我正在进行ng-bind-html测试的项目。谢谢大家

-T

0 个答案:

没有答案