0

我想使用隔离范围来获取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)
4

1 回答 1

1

尝试hide-buttons使用 html 而不是hideButtons. todo有效，因为其中没有大写字母。Angular 会自动规范化标签和属性。

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

来自 angular.js 文档（https://docs.angularjs.org/guide/directive）：

正常化

Angular 对元素的标签和属性名称进行规范化，以确定哪些元素与哪些指令匹配。我们通常通过区分大小写的驼峰式规范化名称（例如 ngModel）来引用指令。然而，由于 HTML 不区分大小写，我们在 DOM 中以小写形式引用指令，通常在 DOM 元素上使用破折号分隔的属性（例如 ng-model）。

规范化过程如下：

  • 从元素/属性的前面去除 x- 和 data-。
  • 将 :、- 或 _ 分隔的名称转换为 camelCase。
于 2015-05-27T22:41:51.280 回答