我正在调整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