AngularJS 指令数据绑定

Question

我试图通过将布尔值传递到属性并将其赋回 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？

请注意，我想这样做，因为我将在屏幕上显示该指令的多个实例，并且每个实例都需要单独控制。

Answer 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: "="