AngularJS :怎么说克隆作用域的指令？

Question

我有这个fiddle，不能让它工作。我认为原因在于两个具有自定义指令原地编辑的li元素共享作用域。解决方案是对指令说，创建绑定到父对象上的作用域的副本- transclude help？

angular.module('bla', [])
    .directive('editInPlace', ['$parse','$compile', function($parse, $compile) {
    return {
        restrict: 'A',
        scope: true,
        link: function (scope, element, attribs) {
            var inputStart = '<input style="border: 2 solid black" name="inPlaceInput" style="display:none" value="';
            var inputEnd = '">';

            scope.editModeAccessor = $parse(attribs.editInPlace);
            scope.modelAccessor = $parse(attribs.ngBind);

            scope.$watch(attribs.editInPlace, function(newValue, oldValue){
                if (newValue){
                    console.debug("click");
                    console.debug("value: " + scope.modelAccessor(scope));
                    var inputHtml = inputStart + scope.modelAccessor(scope) + inputEnd;
                    element.after(inputHtml);
                    jQuery(element).hide();
                    scope.inputElement = jQuery("input[name=inPlaceInput]");
                    scope.inputElement.show();
                    scope.inputElement.focus();
                    scope.inputElement.bind("blur", function() {
                        blur();
                    });
                } else {
                    blur();
                }
            });

            function blur(){
                console.debug("blur secondary");
                if (scope.inputElement){
                    console.debug("blur secondary inputElement found");
                    var value = scope.inputElement.val();
                    console.debug("input value: "+ value);
                    scope.inputElement.remove();
                    jQuery(element).show();
                    scope.editModeAccessor.assign(scope, false);
                    scope.modelAccessor.assign(scope, value);
                }
            }
        }
    }
                            }]);

function ContactsCtrl($scope, $timeout){
    $scope.contacts = [{number:'+25480989333', name:'sharon'},{number:'+42079872232', name:''}];
    $scope.editMode = false;
    var editedId;
    $scope.edit = function(id){
        $scope.editMode = true;
        jQuery("#"+id).hide();
        editedId = id;
        //TODO show delete button
    }
    $scope.$watch('editMode', function(newValue, oldValue){
        if (!newValue && editedId){
            jQuery("#"+editedId).show();
        }
    });
}


<div ng-app="bla">
<div ng-controller="ContactsCtrl">
<h4>Contacts</h4>
<ul>
    <li ng-repeat="contact in contacts">
        <span edit-in-place="editMode" ng-bind="contact.number"></span>
        <span edit-in-place="editMode" ng-bind="contact.name"></span>
        <span id="{{$index}}" ng-click="edit($index)"><i class="icon-edit">CLICKtoEDIT</i></span>
    </li>
</ul>
</div></div>

Answer 1

我认为克隆作用域不是最好的解决方案。

当在angular中创建一个指令时，你应该在指令中封装的功能。你也应该避免在不需要的时候混用jQuery。大多数情况下(如本例所示)，您只是引入了不必要的复杂性。最后，类是控制显示的最佳方式，而不是元素的style属性。

我冒然以一种更“角度”的方式重写了你的指令--没有jQuery。正如您从更新的jsFiddle中所看到的，它更简单、更干净。而且，它还能工作！

可以很容易地修改此指令，以添加许多额外的、令人惊叹的功能。

app.directive( 'editInPlace', function() {
  return {
    restrict: 'E',
    scope: { value: '=' },
    template: '<span ng-click="edit()" ng-bind="value"></span><input ng-model="value"></input>',
    link: function ( $scope, element, attrs ) {
      // Let's get a reference to the input element, as we'll want to reference it.
      var inputElement = angular.element( element.children()[1] );

      // This directive should have a set class so we can style it.
      element.addClass( 'edit-in-place' );

      // Initially, we're not editing.
      $scope.editing = false;

      // ng-click handler to activate edit-in-place
      $scope.edit = function () {
        $scope.editing = true;

        // We control display through a class on the directive itself. See the CSS.
        element.addClass( 'active' );

        // And we must focus the element. 
        // `angular.element()` provides a chainable array, like jQuery so to access a native DOM function, 
        // we have to reference the first element in the array.
        inputElement[0].focus();
      };

      // When we leave the input, we're done editing.
      inputElement.prop( 'onblur', function() {
        $scope.editing = false;
        element.removeClass( 'active' );
      });
   }
};

})；