Question

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

我有以下标记：

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

我的angularjs代码是：

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

我遇到的问题是，在指令中，我无法检索到＆＃39;可见性的价值＆＃39;所以我可以将它分配给$ scope.popupVisible，然后传递给ng-show。

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

from gi.repository import Gtk

win = Gtk.Window()
btn = Gtk.Button("Ok")

win.add(btn)
win.show_all()
win.connect('destroy', Gtk.main_quit)

Gtk.main()

我的问题是，如何将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: "="
一样玩它

AngularJS指令数据绑定

1 个答案: