3

我有一组共享范围的指令

更新：

该代码可在此处以 plunk 形式获得http://plnkr.co/edit/JZ77bsZgGrw6N4K718Is?p=preview

待办事项：

 app.directive("todoItem",function(DeleteTodo,$log){
var dirDefObj = {
    restrict:'E',
    templateUrl:'app/templates/todo.html',
    scope:{
        todo:'=value'
    },
    controller:function($scope){},
    replace:true
};
return dirDefObj;
});

模板：

<div class="ui card">
  <todo-formui ng-show="todo.editMode"></todo-formui>
  <todo-cardui ng-show="!todo.editMode"></todo-cardui>
</div>

有两个指令继承了该指令的范围：

托多卡迪

app.directive('todoCardui',function(){
var dirDefObj = {
    restrict:'E',
    templateUrl:'app/templates/display-todo.html',
    scope:false,
    replace:true,
    controller:function($scope)
    {
        $scope.clickDone = function clickDone(){
            //two tasks (1)toggle the done value on the todo (2) toggle the btnText on the todo
            $scope.todo.done = !$scope.todo.done;
            $scope.todo.btnText = $scope.todo.done?'Reinstate':'Done';
        };

        $scope.remove = function remove()
        {
            DeleteTodo.delete($scope.todo);
            $scope.$emit('todo:deleted',$scope.todo);
        };

        $scope.edit = function edit(value)
        {
            $scope.todo.editMode = true;
            $scope.savedState = angular.extend({},$scope.todo);
        };  
    }
};
return dirDefObj;
});

模板：

 <div>
<div class="content">
    <i class="right floated blue pencil icon" ng-click="edit()"></i> 
    <header class="ui medium header">
        <span ng-class="{'done-todo':todo.done,'normal-todo':!todo.done}">{{todo.task}}</span>
    </header>
    <div class="description">
        <p>{{todo.description}}</p>
    </div>
</div>
<div class="extra content">
    <button class="ui small green toggle button floated left" ng-click="clickDone()">{{todo.btnText}}</button>
    <button class="ui small red button floated left" ng-click="remove()">Delete</button>
</div>
</div>

todo-formui:

app.directive("todoFormui",function(EditService){
var dirDefObj = {
    restrict:'E',
    templateUrl:'app/templates/edit-todo.html',
    scope:false,
    controller:function($scope){
        $scope.display = function display(){
            console.log("Inside the edit to preview function");
            $scope.editMode = false;
        };

        $scope.save = function(){
            EditService.edit($scope.todo);
        };

        $scope.discard = function(){
            $scope.todo={
                task:'',
                dscription:'',
                btnText:''
            };
            $scope.todo = $scope.savedState;

        };
    },
    replace:true
};
return dirDefObj;
});

模板：

<div ng-class="{description:show_modal,content:!show_modal}">
<i class="right floated blue unhide icon" ng-click="display()"></i>
<form class="ui small form">
    <div class="field">
        <label>Task</label>
        <input type="text" name="task" placeholder="What do you want to do?"ng-model="todo.task">
    </div>
    <div class="field">
        <label>Description</label>
        <textarea ng-model="todo.description"></textarea>
    </div>
    <div class="two fields">
        <button class="ui red button floated right">Discard</button>
        <button class="ui submit green button floated right" ng-click="save()">Save</button>
    </div>  
</form>

执行代码时，发现todo-formui中的显示函数，不管我放在哪里，不管我想做什么，都不会执行。同范围内的save函数运行没有问题。

4

2 回答 2

1

这是因为图标在另一个 html 元素下，并且没有触发 click 事件。在“预览”图标（浮动）之后添加一个清除以将表单推送到应有的位置。使用一些 DOM 检查器，您很快就会意识到问题所在。

于 2015-04-28T14:42:27.860 回答
1

在您的预览功能中（如 plunker 中所述），您必须将范围更新为

$scope.todo.editMode = false;

代替

$scope.editMode = false;

然后预览将可用

希望这可以帮助

于 2015-04-29T13:22:14.490 回答