Манипулирование DOM в директиве, что теперь?

Question

Я сделал директиву (inline-edit) и манипулировал DOM в функции компиляции, но как я могу сделать другие директивы, которые я добавил для работы? Наверное, мне нужно скомпилировать его, но как? См. Мой jsfiddle здесь: http://jsfiddle.net/tidelipop/m4gbZ/ ng-click не работает, как есть, но странно, почему работает ng-bind? Вы можете видеть, что он работает, если вы отображаете текстовое поле в инструментах dev.

angular.module('MyApp', [], function($compileProvider){ 
    $compileProvider.directive("inlineEdit", function($compile, $q){ 
     return { 
      restrict: "A", 
      scope: true, 
      controller: function($scope){ 
       $scope.editMode = true; 
       $scope.save = function(){ 
        console.log("Saving..."); 
       }; 
      }, 
      compile: function(tElement, tAttrs){ 
       tElement 
        .attr("ng-hide", "editMode") 
        .attr("ng-click", "editMode=!editMode") 
        .after("<textarea ng-show=\"editMode\" ng-model=\""+tAttrs.ngBind+"\"></textarea><button ng-click=\"save()\">Save</button>"); 

       //var scopeResolver = $q.defer(); 
       //$compile(tElement.parent().contents())(scopeResolver.promise); 

       return function(scope, element, attrs, controller){ 
        //scopeResolver.resolve(scope); 
        //$compile(element.parent().contents())(scope); 
        console.log(element.parent().contents()); 
       }; 
      } 
     }; 
    }); 
}) 


.controller("UserAdminCtrl", function($scope){ 
    $scope.data_copy = { 
     user: { 
      user_id: 'sevaxahe', 
      comment: 'test' 
     } 
    }; 
}); 

Answer 1

Похоже, ваша директива конфликтует с нг-затруднительное, я не знаю, почему, но вопрос, который я задал себе вопрос, глядя на ваш код был: Не было бы проще с помощью шаблона и атрибут custon для модели (вместо ng-bind)?
И ответ да!
На самом деле это только мое мнение, но вот что я сделал, изменив код http://jsfiddle.net/DotDotDot/m4gbZ/73/
Я позволю вам взглянуть, мне пришлось изменить некоторые части (ng-click не работает хорошо на текстовом поле, поэтому я помещаю это поведение на кнопке «Сохранить»), но я думаю, что это почти то, что вы хотели. На стороне коды, я изменил HTML, чтобы не вызывать нг-привязку, используя переменную пользовательскую область, которая будет поймана в директиве:

<span inline-edit ff="data_copy.user.comment">First</span> 

В директиве стороны, я избавилась от всех компиляции/материала контроллера , и я добавил шаблон

return { 
     restrict: "A", 
     template:'<div><span ng-hide="editMode" ng-click="editMode=!editMode">{{aModel}}</span><textarea ng-show="editMode" ng-model="aModel"></textarea> <button ng-click="save()">{{getLabel()}}</button></div>', 
     replace:true, 
     scope: {aModel:'=ff'}, 
     link: function(scope, element, attrs){ 
      console.log(element) 
      scope.editMode = true; 
      scope.save = function(){ 
       console.log("Saving..."); 
       scope.editMode=!scope.editMode; 
       }; 
      scope.getLabel=function(){ 
      if(scope.editMode) 
       return "Save"; 
      else 
       return "Change"; 
      } 
      console.log(element.parent().contents()); 
      } 

    } 

Почему? Шаблон, потому что угловой скомпилирует его сам без какого-либо вмешательства.
Я добавил replace:true, чтобы заменить линию, но она полезна

Объем области более важен. scope: {'=ff'} говорит, что я хочу использовать изолированную область видимости, и я хочу, чтобы значение scope.aModel связывалось с переменной ff, переданной в HTML.
«=» означает, что изменения будут оценены из родительской области, и каждая модификация будет отражена в родительском и в директиве

Я заменил контроллер и вашу функцию компиляции (без элементов для компиляции и добавление функции может быть сделано здесь вместо выделенного контроллера) с помощью функции связывания, содержащей необходимые функции. Как я уже говорил, я добавил поведение изменения editMode к кнопке Save, поэтому я добавил немного больше кода, но это не главное, я думаю, вам, возможно, придется изменить ситуацию здесь, чтобы отразить ваше ожидаемое поведение.

I надеюсь, что это поможет, так как я на самом деле не ответить на ваш вопрос, но я думаю, вы также могли бы изучить этот путь

++