使用隔离作用域获取隐藏按钮的属性

Using an isoated scope to obtain a property to hide buttons

本文关键字:按钮 属性 隐藏 获取 隔离 作用域      更新时间:2023-09-26

我想使用一个隔离的作用域来获得指令todo-carduitodo-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代替hideButtonstodo可以工作,因为里面没有大写字母。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