Question

我有一个控制器和两个带模板的指令当我开始时我想只显示一个指令。单击一个按钮后，我想切换可见性隐藏第一个并显示第二个。

var app = angular.module('app',['ui.bootstrap'])

app.controller('customersCtrl',   function($scope, $http,$uibModal)
    {
        var vm = this;
        vm.names=[];
        vm.selected= null;
        vm.id = 0;
        vm.name = "Green Raven";
        vm.grade=93;
        vm.subject="avi's roast";
        vm.date=new Date();
        vm.enableModal=false;

        // paging
        vm.currentPage = 0;
        vm.pageSize = 3;

        vm.load=function ()
        {
            $http.get('Data/todo.json').success(function(data) {
                vm.names = data;
                for (var i=0;i< vm.names.length;i++)
                {
                    vm.names[i].date= new Date();
                }
                vm.id =vm.names.length;
            });
        }
        vm.numberOfPages=function()
        {
            return Math.ceil(vm.names.length/vm.pageSize);
        };

        // selection
        vm.selUser=function(x){

            vm.selected =vm.getName(x);
        };
        ///

        vm.RecalcIndex =function()
        {
            for (var i = 0; i < vm.names.length; i++)
            {
                vm.names[i].id = i;
            }
            //customerService.RecalcIndex(vm.names);
        };


        vm.edit=function(id)
        {
            var selectedName= vm.getName(id);
            vm.subject=selectedName.subject;
            vm.date=selectedName.date;
            vm.id=selectedName.id;
            vm.grade=selectedName.grade;
            vm.name=selectedName.name;
        };
        vm.save=function(id)
        {
           // var currentName ={date:vm.date,grade:vm.grade,id:vm.id,name:vm.name,subject:vm.subject};

            for(var i= 0;i<vm.names.length;i++)
            {
                if(vm.names[i].id==id)
                {
                    vm.names[i].date=vm.date;
                    vm.names[i].grade=vm.grade;
                    vm.names[i].id=vm.id;
                    vm.names[i].name=vm.name;
                    vm.names[i].subject=vm.subject;
                    vm.selected=null;
                }

            }
            vm.RecalcIndex();
            vm.modalInstance.close();
        };
        vm.Add = function()
        {
            vm.names.push({name:vm.name,id:vm.id,subject:vm.subject,date:vm.date,grade:vm.grade});
            vm.id += 1;
           // $uibModal.close();
        };




        vm.getName =function(id)
        {
            for(var i =0; i<vm.names.length ;i++)
            {
                if (vm.names[i].id==id) return vm.names[i];
            }
            return null;
         //   return getName(id);

        };
        vm.Remove = function()
        {
            // we dont have a selected row and so we cant continue
            if(vm.selected==null) return;
            vm.names.splice(vm.selected.id, 1);
            vm.selected= null;
            vm.RecalcIndex();
            vm.currentPage = 0;
            vm.id = vm.names.length;
        };


    });


app.directive('newStudent',  function()
{
    return {
        templateUrl:'./myModalContent.html',
        controller: 'newStudentCtrl',
        controllerAs: 'modal',
        scope:{}
    };
});
app.directive('myStudent',  function()
    {
        return {
            templateUrl:'./tmp.html',
            controller: 'customersCtrl',
            controllerAs: 'ctrl',
            scope:{}
        };
    });

在html页面上我为第一个指令设置了ng-show = true而第二个指令设置了ng-show = false但由于某种原因，只有第一个指令受到ng-show的影响

<body ng-app="app">
    <div ng-controller="customersCtrl as ctrl">
        <div my-Student ng-show="!(enableModal)"></div>
    </div>

    <div ng-controller="customersCtrl as ctrl">
        <div new-student ng-show="enableModal"></div>
    </div>
</body>

Answer 1

您使用控制器作为语法，因此您需要使用ctrl.enableModal而不是直接在模板中使用enableModal。指令名称应该像我的学生而不是我的学生。：）

<body ng-app="app">
    <div ng-controller="customersCtrl as ctrl">
        <div my-student ng-show="!(ctrl.enableModal)"></div>
    </div>

    <div ng-controller="customersCtrl as ctrl">
        <div new-student ng-show="ctrl.enableModal"></div>
    </div>
</body>

隐藏/显示角度指令

1 个答案: