AngularJS 지시문에 여러 특성을 전달하는 방법

Question

지시문에 여러 특성을 전달하는 방법.

<div click-to-edit="location.state" click-to-edit1=12></div> 

처럼 내부 사업부 아래에 클릭 투 EDIT1의 값 (12)을 통과하고 나 좀 도와 controller.please 지침에 액세스 할 수 있어야합니다 어떻게 .

코드 :

앱 HTML :

<div ng-controller="LocationFormCtrl"> 
    <h2>Editors</h2> 
    <div class="field"> 
     <strong>State:</strong> 
     <div click-to-edit="location.state"></div> 
    </div> 

     <h2>Values</h2> 
    <p><strong>State:</strong> {{location.state}}</p> 

</div> 

앱 지침 :

app = angular.module("formDemo", []); 

app.directive("clickToEdit", function() { 
    var editorTemplate = '<div class="click-to-edit">' + 
     '<div ng-hide="view.editorEnabled">' + 
      '{{value}} ' + 
      '<a ng-click="enableEditor()">Edit</a>' + 
     '</div>' + 
     '<div ng-show="view.editorEnabled">' + 
      '<input ng-model="view.editableValue">' + 
      '<a href="#" ng-click="save()">Save</a>' + 
      ' or ' + 
      '<a ng-click="disableEditor()">cancel</a>.' + 
     '</div>' + 
    '</div>'; 

    return { 
     restrict: "A", 
     replace: true, 
     template: editorTemplate, 
     scope: { 
      value: "=clickToEdit", 
     }, 
     controller: function($scope) { 
      $scope.view = { 
       editableValue: $scope.value, 
       editorEnabled: false 
      }; 

      $scope.enableEditor = function() { 
       $scope.view.editorEnabled = true; 
       $scope.view.editableValue = $scope.value; 
      }; 

      $scope.disableEditor = function() { 
       $scope.view.editorEnabled = false; 
      }; 

      $scope.save = function() { 
       $scope.value = $scope.view.editableValue; 
       $scope.disableEditor(); 
      }; 
     } 
    }; 
}); 

앱 컨트롤러 :

app.controller("LocationFormCtrl", function($scope) { 
    $scope.location = { 
     state: "California", 

    }; 
}); 

Answer 1

지침 범위 내에서 새 속성을 추가

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 
    $scope.location = { 
    state: "California",  
    }; 
});  

app.directive("clickToEdit", function() { 
    var editorTemplate = '<div class="click-to-edit">' + 
    '<div ng-hide="view.editorEnabled">' + 
    ' {{value}} ' + 
    '<a ng-click="enableEditor()">Edit</a>' + 
    '</div>' + 
    '<div>{{value1}}</div>' + 
    '<div ng-show="view.editorEnabled">' + 
    '<input ng-model="view.editableValue">' + 
    '<a href="#" ng-click="save()">Save</a>' + 
    ' or ' + 
    '<a ng-click="disableEditor()">cancel</a>.' + 
    '</div>' + 
    '</div>'; 

    return { 
    restrict: "A", 
    replace: true, 
    template: editorTemplate, 
    scope: { 
     value: "=clickToEdit", 
     value1: "=clickToEdit1" 
    }, 
    controller: function($scope) { 
     $scope.view = { 
     editableValue: $scope.value, 
     editorEnabled: false 
     }; 

     $scope.enableEditor = function() { 
     $scope.view.editorEnabled = true; 
     $scope.view.editableValue = $scope.value; 
     }; 

     $scope.disableEditor = function() { 
     $scope.view.editorEnabled = false; 
     }; 

     $scope.save = function() { 
     $scope.value = $scope.view.editableValue; 
     $scope.disableEditor(); 
     }; 
    } 
    }; 
}); 

HTML을 :

<div class="field"> 
    <strong>State:</strong> 
    <div click-to-edit="location.state" click-to-edit1="12"></div> 
</div> 

작업 예 : http://plnkr.co/edit/e7oTtZNvLdu6w5dgFtfe?p=preview

Answer 2

먼저 당신이 그것을에 당신의 지시를 원하는 DIV를 말한다.

<div click-to-edit value='location.state' value1='12'></div> 

app.directive("clickToEdit", function() { 
return { 
    restrict: "A", 
    scope : { 
    value : "=", 
    value1 : "=" 
    }, 
    link : function($scope) { 
    console.log("the first value, should be location.state value on the controller", $scope.value); 
    console.log("the second value, should be '12'", $scope.value); 

    } 
} 

지시문을 요소로 사용하면 논리가 더 필요할 수 있습니다.

하지만 밑줄은 요소에서 속성을 찾은 다음 범위를 통해 지시문에 첨부 할 수 있다는 것입니다. 편도 바인딩의 경우 '=', 편도의 경우 '@'.