javascript - 使用隔离的范围获取隐藏按钮的属性

我想使用隔离范围在指令hideButtons和todo-cardui中获得todo-formui属性：

 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)

最佳答案

在html中尝试hide-buttons而不是hideButtons。 todo之所以有效，是因为其中没有大写字母。 Angular自动归一化标签和属性。

   <todo-formui hide-buttons="uiState.hideButtons" todo="model.todo"></todo-formui>

从angular.js doc（https://docs.angularjs.org/guide/directive）：


  正常化
  
  Angular对元素的标签和属性名称进行归一化以确定
  哪些元素与哪些指令匹配。我们通常指
  指令以区分大小写的驼峰命名规范化名称（例如
  ngModel）。但是，由于HTML不区分大小写，因此我们指的是
  DOM中的指令以小写形式表示，通常使用
  DOM元素上以破折号分隔的属性（例如ng-model）。
  
  规范化过程如下：
  
  
  从元素/属性的前面去除x-和data-。
  将：，-或_分隔的名称转换为camelCase。

关于javascript - 使用隔离的范围获取隐藏按钮的属性，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30494173/