Question

如何将多个属性传递给指令。如何在div下面传递click-to-edit1的值12，如

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

并且应该可以在指令controller中访问。请帮助我。

代码：

应用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指令：

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控制器：

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);

  }
}

当您将指令用作元素时，它似乎更具逻辑性。

但底线是直观地查找元素上的属性，然后您可以通过范围附加到指令。＆＃39; =＆＃39;对于双向绑定，＆＃39; @＆＃39;一种方式。

如何在AngularJS指令中传递多个属性

2 个答案: