加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

链接点击后,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时呈现.

希望这可以帮助你.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读