链接点击后,Angularjs会更改视图模板
发布时间:2020-12-17 09:17:29 所属栏目:安全 来源:网络整理
导读:点击链接后,我想改变html模板.值是布尔值,初始值为true,加载适当的模板,但是当值更改为false时,新模板未加载,我不知道原因.当boolean的初始值为true时,其他模板将成功加载,但在不调用的方法上.请帮忙. 这是我的代码: TaskCtrl app.controller('TasksCtrl',[
点击链接后,我想改变html模板.值是布尔值,初始值为true,加载适当的模板,但是当值更改为false时,新模板未加载,我不知道原因.当boolean的初始值为true时,其他模板将成功加载,但在不调用的方法上.请帮忙.
这是我的代码: TaskCtrl app.controller('TasksCtrl',['$scope','TaskService',function ($scope,TaskService) { // initialize function var that = this; that.newTask = true; that.name = "My name is Nedim"; that.templates = { new: "views/task/addTask.html",view: "views/task/viewTask.html" }; // load all available tasks TaskService.loadAllTasks().then(function (data) { that.items = data.tasks; }); $scope.$on('newTaskAdded',function(event,data){ that.items.concat(data.data); }); that.changeTaskView = function(){ that.newTask = false; console.log("New task value: " + that.newTask); }; return $scope.TasksCtrl = this; }]); task.html <!-- Directive showing list of available tasks --> <div class="container-fluid"> <div class="row"> <div class="col-sm-6"> <entity-task-list items="taskCtrl.items" openItem="taskCtrl.changeTaskView()"></entity-task-list> </div> <div class="col-sm-6" ng-controller="TaskDetailCtrl as taskDetailCtrl"> <!-- form for adding new task --> <div ng-if="taskCtrl.newTask" ng-include="taskCtrl.templates.new"></div> <!-- container for displaying existing tasks --> <div ng-if="!taskCtrl.newTask" ng-include="taskCtrl.templates.view"></div> </div> </div> entityList指令 app.directive('entityTaskList',function () { return { restrict: 'E',templateUrl: 'views/task/taskList.html',scope: { items: '=' },bindToController: true,controller: 'TasksCtrl as taskCtrl',link: function (scope,element,attrs) { } }; }); 指令模板 <ul class="list-group"> <li ng-repeat="item in taskCtrl.items" class="list-group-item"> <a ng-click="taskCtrl.changeTaskView()"> <span class="glyphicon glyphicon-list-alt" aria-hidden="true"> </span> <span>{{item.name}}</span> <span class="task-description">{{item.description}}</span> </a> </li> {{taskCtrl.newTask}}
没有任何plunker或JSFiddle我无法确定,但它可能是问题与ng-if.我在想两种解决方法.
首先我觉得好点了仅使用1 ng-include,只能更改模板. HTML: <entity-task-list items="taskCtrl.items" openItem="taskCtrl.changeTaskView('view')"></entity-task-list> ... <div ng-include="taskCtrl.currentTemplate"></div> JS: that.currentTemplate = that.templates.new; ... that.changeTaskView = function(template) { that.currentTemplate = that.templates[template]; }; 或者如果您不喜欢此解决方案,请尝试使用ng-show而不是ng-if.使用ng显示元素将被显示:none;属性当页面加载时,而ng – 如果它们将在传递的值为true时呈现. 希望这可以帮助你. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |