1
我正在开发一个TODO app.I有一个模板,进行UI view'ed从index.html的(todoTemplate.html):如何用角度js中的另一个地方替换HTML模板?
<div class="container-fluid">
<div class="taskBox" ng-repeat="task in tasks">
<div class="well">
<h4 class="todoTitle">{{task.name}}</h4>
<br>
<h6>Created on : {{task.createdAt}}</h6>
<a id="{{task.id}}" ui-sref=".update" ng-click="showDiv=true" class="right-floated-edit fa fw fa-edit"></button>
<a ui-sref="#" class="right-floated-trash fa fw fa-trash"></a>
<br>
<a ui-sref="#" class="btn btn-warning form-control cross-btn">{{task.type}}</a>
</div>
<div ui-view ng-show="showDiv"></div>
</div>
</div>
这是我想代替上面显示模板DIV连同ID(todoUpdate.html):
<div class="container-fluid">
<div class="taskBox">
<label for="taskName">Name</label>
<input type="text" name="taskName" placeholder="What needs to be done"/>
<input type="button" ng-click="updateTodo()" class="btn btn-success" name="update" value="Update"/>
<br>
<button class="btn btn-warning" ng-click="closeEditBox()">Back</button>
</div>
</div>
这是我的路线:
mod.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
$stateProvider.state('allTodo',{
url:'/todo',
templateUrl: 'modules/todo/views/todoTemplate.html',
controller: 'ToDoController'
})
.state('allTodo.update',{
url:'/update',
templateUrl: 'modules/todo/views/todoUpdate.html',
controller: 'UpdateController'
});
}]);
这些都是我的控制器:
angular.module('myTodoApp.todoModule.controllers',['myTodoApp.todoModule.services'])
.controller('ToDoController',['$scope','todoService',function($scope,todoService){
$scope.tasks=todoService.query();
}])
.controller('UpdateController',['$stateParams','$state','$scope','todoService',function($stateParams,$state,$scope,todoService){
$scope.closeEditBox=function(){
$state.go('allTodo');
};
$scope.updateTodo=todoService.query({id:$stateParams.id});
console.log($scope.updateTodo);
}]);
目前执行后,我得到这样的: 简单地说,我要表现出todoTemplate.html各自点击链接的确切地点todoUpdate.html,我应该能够编辑内容和调用API来更新数据。
在这个演示有看,你就会明白: https://todo-vue.herokuapp.com/
请帮我做取悦和非常感谢!
见我答更新你会帮助你。 –