Как отобразить кнопки в зависимости от состояния директивы

Учитывая следующие данные, состоящий из массива элементов, которые имеют заголовок и текст:Как отобразить кнопки в зависимости от состояния директивы

[ 
    { 
     title: 'title1', 
     text: 'text1' 
    }, 
    { 
     title: 'title2', 
     text: 'text2' 
    } 
]

Каждый элемент массива должен отображается как элемент списка, используя ng-repeat. В то время как каждый элемент использует contenteditable, чтобы сделать эти поля доступными для редактирования.

Я использую директиву, чтобы элементы редактируемые

app.directive("contenteditable", function() { 
    return { 
    restrict: "A", 
    require: "ngModel", 
    link: function(scope, element, attrs, ngModel) { 
     function read() { 
     ngModel.$setViewValue(element.html()); 
     } 

     ngModel.$render = function() { 
     element.html(ngModel.$viewValue || ""); 
     }; 

     element.bind("blur keyup change", function() { 
     scope.$apply(read); 
     }); 
    } 
    }; 
});

Это мнение, что делает использование contenteditable директивы

<div ng-repeat = "entry in contentEditables.entries"> 
     <span contenteditable ng-model="entry.title"></span> 
     <span contenteditable ng-model="entry.text"></span> 
     <button ng-if="howToQueryIfOneOfTheContentEditablesHasBeenEdited?">save</button> 
</div>

Каждая строка должна иметь кнопку «сохранить», который должен отображаться только в том случае, если один или оба контентных элемента этой строки были изменены. Я могу отслеживать изменение директивы contenteditable, предоставляя ей свою собственную область видимости, однако мне не удалось найти способ отображения кнопки сохранения только тогда, когда элементы этой строки были изменены.

Как запросить директиву из представления? Есть ли лучший способ сделать что-то подобное?

Plunker можно найти здесь: http://plnkr.co/edit/E8ZC8zwGlO0AjsOoWTss?p=preview

источник

2015-08-31 Steve Hummingbird

я в конечном итоге написание простой контроллер для обработки этого:

app.controller('EditableController', ['$scope', function(scope) { 

    var initial = {}; 
    angular.copy(scope.entry, initial); 

    scope.edited = function(val) { 
    return !angular.equals(val, initial); 
    }; 

}]);

И инициализировать этот контроллер:

<body> 
    <div ng-controller="ContentEditableController as contentEditables"> 
     <div ng-repeat = "entry in contentEditables.entries" ng-controller="EditableController"> 
     <span contenteditable ng-model="entry.title"></span> 
     <span contenteditable ng-model="entry.text"></span> 
     <button ng-if="edited(entry)">save</button> 
     </div> 
    </div> 
    </body>

Plunker можно найти здесь: http://plnkr.co/edit/E8ZC8zwGlO0AjsOoWTss?p=preview

источник

2015-09-03 13:27:07

Как отобразить кнопки в зависимости от состояния директивы

ответ

Смежные вопросы