如何用角度js中的另一個地方替換HTML模板？

我正在開發一個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/

請幫我做取悅和非常感謝！

來源

2017-09-26 Srk95

見我答更新你會幫助你。 –

var app = angular.module('myApp',[]); 
 
app.controller('myCtrl', function($scope){ 
 
$scope.tasks = [{name:"todo", id:"1"},{name:"hi", id:"2"},{name:"hello", id:"3"}]; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script> 
 

 
<body ng-app="myApp"> 
 
<div class="container-fluid" ng-controller="myCtrl"> 
 
    <div class="taskBox" ng-repeat="task in tasks"> 
 
    <div class="well"> 
 
     <h4 class="todoTitle">{{task.name}}</h4> 
 
    <!-- <h6>Created on : {{task.createdAt}}</h6> --> 
 
     <button id="{{task.id}}" ng-click="task.showDiv=true" class="right-floated-edit fa fw fa-edit">update</button> 
 
    <div ng-show="task.showDiv"> 
 
    <div ng-include="'template.html'"></div> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div> 
 
<script id="template.html" type="text/ng-template"> 
 
    <div class="taskBox"> 
 
     <label for="taskName">Name</label> 
 
     <input type="text" name="taskName" ng-model="task.name" placeholder="What needs to be done"/> 
 
     <input type="button" ng-click="updateTodo()" class="btn btn-success" name="update" value="Update"/> 
 
     <button class="btn btn-warning" ng-click="task.showDiv=false;">Back</button> 
 
    </div> 
 
    </script> 
 
    </body>

嘗試像下面..

<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="task.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="task.showDiv"></div> 
    </div> 
</div>

顯示模板（todoUpdate.html）：

<div class="container-fluid"> 
    <div class="taskBox"> 
     <label for="taskName">Name</label> 
     <input type="text" name="taskName" ng-model="task.taskname" placeholder="What needs to be done"/> 
     <input type="button" ng-click="updateTodo()" class="btn btn-success" name="update" value="Update"/> //updateTodo(task). you can pass task to server with task id. 
     <br> 
     <button class="btn btn-warning" ng-click="closeEditBox()">Back</button> 
    </div>

來源

2017-09-26 10:10:28

如何用角度js中的另一個地方替換HTML模板？

回答

相關問題