Question

说我有

<div ng-app="myApp">
    <div minicalendar>
        <div class="actions">
            <span ng-click="change()" month="2" year="2014">Prev</span>
            <span ng-click="change()" month="4" year="2014">Next</span>
        </div>
   </div>
</div>

我目前有以下指令：

var App = angular.module('myApp', [] );
App.directive('minicalendar', function() {
   return {
       controller: function($scope, $http) {
           $scope.change = function() {
               // use $http and pass the month and year
           }
      }
   }
});

如何获取月份和年份属性值并通过$ http发送？这样我就不需要有一个函数prev（）和另一个名为next（）的函数，然后可以只使用一个函数change（）。

我最终采取了不同的方法，这使得它更容易：

<span ng-click="change(2, 2014)">Prev</span>
<span ng-click="change(4, 2014)">Next</span>

现在我可以调用函数change(month, year)并获取参数。

Answer 1

您可以使用隐藏的输入字段。此外，您还可以在控制器中设置值。

查看代码

<div ng-app="myApp">
    <div minicalendar>
        <div class="actions">
            <span ng-click="change()">
                <input type="hidden" ng-model="previous_month"/>
                <input type="hidden" ng-model="previous_year"/>
                Prev
            </span>
            <span ng-click="change()">
                <input type="hidden" ng-model="next_month"/>
                <input type="hidden" ng-model="next_year"/>
                Next
            </span>
        </div>
   </div>
</div>

在控制器中：

$scope.previous_month = 2;
$scope.previous_year = 2014;

$scope.next_month = 4;
$scope.next_year = 2014;

Answer 2

对于获取月/年的值，对于此要求，我假设您使用的是JQuery，然后您可以通过以下方法获取它：

将id属性添加到prev和next span，例如

<span id='prevlink' ng-click="change()" month="2" year="2014">Prev</span> <span id='nextlink' ng-click="change()" month="4" year="2014">Next</span>
然后你可以通过
获得月/年的价值
prevmonth = $("#prevlink").attr('month') prevyear = $("#prevlink").attr('year') nextmonth = $("#nextlink").attr('month') nextmonth = $("#nextlink").attr('year')

如果您没有使用jQuery，那么您可以通过以下方法执行此操作：

首先将控制器的定义更改为

controller: function($scope, $element, $http) {
然后通过
获取值
$element[0].childNodes[1].attributes['month'].value; $element[0].childNodes[1].attributes['year'].value; $element[0].childNodes[3].attributes['month'].value; $element[0].childNodes[3].attributes['year'].value;

注意：

此代码片段完全适用于您在上面发布的内容，如果您调整了html元素的结构，则需要更改子节点的索引。

Answer 3

如果你想以Angular的经典方式制作minicalendar指令，你不应该直接在DOM元素和属性上存储数据，而是使用指令的模型（$scope）代替。除此之外，最好将所有指令的逻辑封装在其中，而不是转发正确标记（即＆＃34;它知道＆＃34;它在指令范围内运行）这一事实并且在指令的控制器中有一个change()函数在使用时放在指令内。以下是如何完成的示例：

Plunker：http://plnkr.co/edit/T9grZk2gHHF4eGMkzXrq?p=info

<强> HTML

<div ng-app="myApp" ng-init="currentDate = {month:3, year:2014}">
  <div minicalendar="currentDate">
    Some data
  </div>
</div>

<强>的JavaScript

angular.module('myApp',[]).
  directive('minicalendar', function() {

    function getAnotherMonth(date, monthDelta) {
      // In Date() month starts from 0, so we should add and substract 1 when manipulating dates
      var other = new Date(date.year, date.month + monthDelta - 1);
      return {
        month: other.getMonth() + 1,
        year: other.getFullYear()
      }
    }

    return {
      template: '<div class="actions">' +
                  '<span ng-click="change(prev)">{{prev.label}}</span>' +
                  '<span ng-click="change(next)">{{next.label}}</span>' +
                '</div>' +
                '<h3>{{minicalendar.month}}-{{minicalendar.year}}</h3>' +
                '<div ng-transclude></div>',
      transclude: true,
      scope: {
        minicalendar: '=' // <= Bind your local scope minicalendar property to some external scope property passed in minicalendar attribute of directive's root element
      },
      link: function($scope) {
        $scope.$watch('minicalendar.month', function() {
          var prev = getAnotherMonth($scope.minicalendar, -1),
              next = getAnotherMonth($scope.minicalendar, +1);
          angular.extend($scope, {
            prev: {
              label: $scope.minicalendar.prev || 'Prev',
              month: prev.month,
              year: prev.year
            },
            next: {
              label: $scope.minicalendar.next || 'Next',
              month: next.month,
              year: next.year
            }
          });
        });
      },
      controller: ['$scope', '$http', function($scope, $http) {
        $scope.change = function(date) {
          $scope.minicalendar.month = date.month;
          $scope.minicalendar.year = date.year;
          // Do whatever you want with $http
        }
      }]
    }
  });

有关编写自定义指令的更多信息，您可以找到here。

AngularJS抓取属性值

3 个答案: