AngularJS抓取属性值

说我有

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

如何获取月和年属性值并通过$http发送它们？这样，我就不需要函数prev（）和另一个函数next（），只需要使用一个函数change（）

---

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

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

Prev
下一个

---

现在，我可以调用函数

change（month，year）

并根据需要获取参数。

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

查看代码

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

---

对于获取月/年的值，对于这个需求，我假设您使用的是JQuery，那么您可以通过以下方法获取：

• 例如，向上一个跨度和下一个跨度添加id属性

  Prev
  下一步

• 然后，您可以通过

  prevmonth=$（“#prevlink”）.attr（'month'）
  prevyear=$（“#prevlink”）.attr（'年'）
  下一个月=$（“#下一个链接”）.attr（'month'））
  下个月=$（“#下个链接”）.attr（'year'）

如果未使用jQuery，则可以通过以下方法执行此操作：

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

  controller:function（$scope，$element，$http）{

• 然后通过

  $element[0]。子节点[1]。属性['month']。值；
  $element[0]。子节点[1]。属性['year']。值；
  $element[0]。子节点[3]。属性['month']。值；
  $element[0]。子节点[3]。属性['year']。值；

注意:

---

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

如果您希望以Angular的经典方式制作

minicaller

指令，则不应直接存储DOM元素和属性上的数据，而应使用model（

$scope

）代替指令。除此之外，最好将指令的所有逻辑都包含在指令中，而不是依赖于正确的标记（即“知道”它在指令的范围内运行，并且指令的控制器中有一个

change（）

函数）在使用时放置在指令的内部。下面是一个如何执行的示例：

普朗克：

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

angular.module（'myApp'，[]）。
指令（'迷你日历'，函数（）{
函数getAnotherMonth（日期，月数）{
//在Date（）中，月份从0开始，所以在处理日期时，我们应该加上和减去1
var other=新日期（Date.year，Date.month+monthDelta-1）；
返回{
月份：other.getMonth（）+1，
年份：其他。getFullYear（）
}
}
返回{
模板：“”+
“{prev.label}”+
“{next.label}”+
'' +
“{{minicaller.month}}-{{minicaller.year}”+
'',
是的，
范围：{
迷你日历：'='//您应该使用AngularJs ng模型，对吗？我认为ng模型用于输入、选择、文本区域等。
<div ng-app="myApp" ng-init="currentDate = {month:3, year:2014}">
  <div minicalendar="currentDate">
    Some data
  </div>
</div>

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