AngularJS 指令数据绑定答案

【问题标题】：AngularJS directive data bindingAngularJS 指令数据绑定
【发布时间】：2015-05-01 11:05:00
【问题描述】：

我试图通过将布尔值传递给属性并将其分配回 ng-show 来控制指令的可见性。

我有以下标记：

  <div>
      {{ showFromDate }}
      <input type="datetime" ng-click="showFromDate =!showFromDate" ng-model="fromDate"/>
      <simple-date-picker class="date-picker"  visibility="showFromDate" ng-show="popupVisible"  data-ng-model="fromDate">
          <p>This is a custom date picker</p>
       </simple-date-picker>
  </div>

我的 angularjs 代码是：

var app = angular.module('myapp',[]);
 app.directive('simpleDatePicker', ['$document', '$parse', function ($document, $parse) {
        return {
            restrict: 'EA',
            link: function (scope, elem, attrs) {

            },
            scope: {
                visibility: "="
                },
           controller: ["$scope", function ($scope) {

                        $scope.popupVisible = $scope.visibility;
                        $scope.showPopup = function($event) {
                            $event.stopPropagation()
                            $scope.popupVisible = true;
                          };
            }]
        };
    }]);

我遇到的问题是，在指令中我无法检索“可见性”的值，因此我可以将其分配给 $scope.popupVisible，然后将其传递给 ng-show。

当我将 ng-show 更改为 ng-show="showFromDate" 时，我可以使用输入的点击处理程序显示和隐藏指令。示例：

  <div>
  {{ showFromDate }}
   <input type="datetime" ng-click="showFromDate =!showFromDate" ng-model="fromDate"/>
            <simple-date-picker class="date-picker"  visibility="showFromDate" ng-show="showFromDate"  data-ng-model="fromDate">
            <p>This is a custom date picker</p>
            </simple-date-picker>
  </div>

我的问题是，如何将 showFromDate 传递给 popupVisible？

请注意，我想这样做是因为屏幕上有多个指令实例，每个实例都需要单独控制。

【问题讨论】：

标签： angularjs directive

【解决方案1】：

你只需要在你的指令属性上传递visibility="popupVisible"，而不是传递showFromDate

  <simple-date-picker class="date-picker"  visibility="popupVisible" ng-show="popupVisible"  data-ng-model="fromDate">
      <p>This is a custom date picker</p>
   </simple-date-picker>

那么指令控制器中就不需要$scope.popupVisible = $scope.visibility;这一行了

或

否则，您只需将 $scope.popupVisible = $scope.visibility; 行更改为 $scope.$parent.popupVisible = $scope.visibility; 即可更改父控制器的值，但似乎不是处理范围的好方法。

更好的方法是在指令隔离范围内再传递一个值。并像现在一样使用它visibility: "="

【讨论】：