【发布时间】：2018-06-21 20:27:57
【问题描述】：
我有一个控制器和两个带有模板的指令 当我开始时，我只想显示一个指令。 单击按钮后，我想切换可见性 隐藏第一个并显示第二个。
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>
【问题讨论】：
-
是
<div my-Student还是<div my-student?
标签： angularjs