使用隔离范围获取属性来隐藏按钮

Question

我想使用独立作用域来获取指令中的 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 已经 been.I 也尝试过：

$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)

Answer 1

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

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

来自 angular.js 文档 (https://docs.angularjs.org/guide/directive):

Normalization

Angular normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model).

The normalization process is as follows:

Strip x- and data- from the front of the element/attributes.

Convert the :, -, or _-delimited name to camelCase.

使用隔离范围获取属性来隐藏按钮

Using an isoated scope to obtain a property to hide buttons

javascript

angularjs

isolate-scope

使用隔离范围获取 属性 来隐藏按钮

Using an isoated scope to obtain a property to hide buttons

javascript

angularjs

isolate-scope

使用隔离范围获取属性来隐藏按钮