使用隔离作用域获取隐藏按钮的属性
Using an isoated scope to obtain a property to hide buttons
我想使用一个隔离的作用域来获得指令todo-cardui
和todo-formui
中的hideButtons
属性:
app.directive("todoFormui",function(TodoService){
var dirDefObj = {
restrict:'E',
templateUrl:'app/templates/edit-todo.html',
scope:{
hideButtons:"=hideButtons",
todo:"=todo"
},
controller:function($scope){
$scope.hideButtons = $scope.$parent.uiState.hideButtons;
//add a seperate model for editor and actions
console.log($scope.hideButtons);
$scope.model = {
todo:$scope.todo
};
$scope.uiState = {
editMode:true,
btnText:'Done'
};
$scope.actions = {};
$scope.actions.preview = function(){
console.log("Inside the edit to preview function");
$scope.uiState.editMode = false;
};
$scope.actions.save = function(){
TodoService.edit($scope.model.todo);
};
$scope.actions.discard = function(){
$scope.model.todo={
task:'',
dscription:'',
done:''
};
$scope.todo = $scope.savedState;
};
},
replace:true
};
return dirDefObj;
});
app.directive('todoCardui',function(TodoService){
var dirDefObj = {
restrict:'E',
templateUrl:'app/templates/display-todo.html',
scope:{
"hideButtons":"=hideButtons",
todo:"=todo"
},
replace:true,
controller:function($scope)
{ console.log($scope);
$scope.model = {
todo:$scope.todo
};
$scope.uiState = {
editMode:false,
btnText:'Done'
};
$scope.actions = {};
$scope.actions.clickDone = function clickDone(){
//two tasks (1)toggle the done value on the todo (2) toggle the btnText on the todo
$scope.model.todo.done = !$scope.model.todo.done;
$scope.uiState.btnText = $scope.todo.done?'Reinstate':'Done';
};
$scope.actions.remove = function remove()
{
TodoService.delete($scope.model.todo);
$scope.$emit('todo:deleted',$scope.model.todo);
};
$scope.actions.edit = function edit(value)
{
$scope.uiState.editMode = true;
console.log($scope.uiState.editMode);
};
}
};
return dirDefObj;
});
它们的父指令是一个叫做create-modal
的指令,看起来像这样:
app.directive('modalCreate',['$log','TodoService',function($log,TodoService) {
var dirDefObj = {
restrict:'E',
scope:{},
templateUrl:'app/templates/create-todo.html',
controller:function($scope,TodoService)
{
$scope.model = {};
$scope.actions = {};
$scope.uiState = {};
$scope.model.todo ={
task:'What do you want to do?',
description:'Lorem Ipsum Dolar...screw it'
};
$scope.uiState.hideButtons = true;
$scope.actions.show_modal=function show_modal()
{
if(!$('.create-modal').modal('is active'))
$('.create-modal').modal('show');
};
$scope.actions.saveTodo = function saveTodo(){
TodoService.save($scope.todo);
$('.create-modal').modal('hide');
};
$scope.actions.cancel = function cancel(){
$log.info("Cancel the todo action,currently a no-op");
$('.create-modal').modal('hide');
};
},
replace:true
};
return dirDefObj;
}]);
我这样使用代码:
<div class="ui segment">
<button class="ui button" ng-click="actions.show_modal()">Create Todo</button>
<div class="ui modal create-modal">
<i class="ui icon close" ng-click="cancel()"></i>
<div class="header">Create Todo</div>
<div class="content">
<todo-formui hideButtons="uiState.hideButtons" todo="model.todo"></todo-formui>
<div class="ui vertical divider">
<span class="ui teal circular label">Is</span>
</div>
<div class="preview">
<todo-cardui hideButtons="uiState.hideButtons" todo="model.todo"></todo-cardui>
</div>
</div>
<div class="actions">
<button type="button" class="ui button green save-button" ng-click="actions.saveTodo()">Save</button>
<button type="button" class="ui button red delete-button" ng-click="actions.cancel()">Cancel</button>
</div>
</div>
属性hideButtons
未被拾取,而todo
已被拾取。我也试过:
$scope.hideButtons = $scope.$parent.uiState.hideButtons;
抛出错误:
Error: [$compile:nonassign] Expression 'undefined' used with directive
'todoFormui' is non-assignable!
http://errors.angularjs.org/1.3.15/$compile/nonassign?p0=undefined&p1=todoFormui
at REGEX_STRING_REGEXP (angular.js:66)
at $get.parentSet (angular.js:7703)
at parentValueWatch (angular.js:7716)
at Object.regularInterceptedExpression (angular.js:12914)
at Scope.$get.Scope.$digest (angular.js:14303)
at Scope.$get.Scope.$apply (angular.js:14574)
at done (angular.js:9701)
at completeRequest (angular.js:9891)
at XMLHttpRequest.requestLoaded (angular.js:9832)
试着用hide-buttons
代替hideButtons
。todo
可以工作,因为里面没有大写字母。Angular会自动规范标签和属性。
<todo-formui hide-buttons="uiState.hideButtons" todo="model.todo"></todo-formui>
From angular.js doc (https://docs.angularjs.org/guide/directive):
)正常化
Angular将元素的标签和属性名规范化,以确定哪些元素匹配哪些指令。我们通常指的是指令的大小写敏感的camelCase规范化名称(例如:ngModel)。但是,由于HTML不区分大小写,我们引用在DOM中使用小写形式的指令,通常使用(例如ng-model).
规范化过程如下:
- 从元素/属性的前面去掉x和数据。
- 将:、-或_分隔的名称转换为camelCase
相关文章:
- JQuery示例不起作用-“;对象没有't支持属性或方法'按钮'&”;
- 在jquerymobile中设置按钮css属性的动画
- 单击按钮时的窗口属性
- 如何使用按钮'的OnClientClick属性,以便在ASP.NET中运行一些多个JavaScript函数
- vue-js-单选按钮won't默认情况下使用v-model属性进行检查
- 我们可以设置属性'id'到不同的'按钮'通过使用javascript或jquery的循环
- 如何将按钮的数据属性设置为输入[type=text]中设置的任何值
- 单击TextArea'时,文本区域中的属性名称是什么;s上下箭头按钮
- 在jquery中获取实际点击的按钮属性
- 通过选择dropdwon来更改按钮属性
- 通过 javascript 设置按钮属性
- YouTube嵌入式播放器将视频下载为MP4按钮属性
- JavaScript 启用新的 HTML5 按钮属性:formaction、formmethod
- 设置 ASP.NET 按钮属性客户端和读取属性值服务器端
- jQuery改变按钮属性
- 按钮属性"disable"不工作
- 禁用表单提交可防止发送按钮属性
- 在页面重新加载后保留按钮属性
- 更改隐藏/显示画布上的按钮属性
- Mozilla自动添加disabled=""作为按钮属性