Javascript 在指令中观看ng show反向工作

当我的指令被显示或隐藏时，我试图做一些逻辑。但正如您在本文中看到的，元素的可见性报告错误

我错过了什么

HTML:

我是一个对话者

显示/隐藏

角js：

var app = angular.module('app', []);
app.directive('dialog', function() {
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    scope: false,
    template: '<div class="dialog">' +
      '<div class="overlay"></div>' +
      '<div class="body" ng-transclude>' +

      '</div>' +
      '</div>',
    link: function(scope, element, attributes) {
      scope.$watch(function() {
        return element.is(':visible')
      }, function() {
        dialog = element;
        console.log('visibility of dialog changed to ', element.is(':visible'));
      });
    }
  };
});
app.controller('testController', function($scope) {
  $scope.showHideDialog = function() {
    $scope.showDialog = !$scope.showDialog;
  };
});

var-app=angular.module（'app'，[]）；
app.directive（'dialog'，function（）{
返回{
限制：'E'，
替换：正确，
是的，
范围：假，
模板：“”+
'' +
'' +
'' +
'',
链接：功能（范围、元素、属性）{
范围$watch（函数（）{
返回元素。是（“：可见”）
}，函数（）{
对话框=元素；
console.log（'对话框的可见性更改为'，element.is（':visible'）；
});
}
};
});
app.controller（'testController'，函数（$scope）{
$scope.showHideDialog=函数（）{
$scope.showDialog=！$scope.showDialog；
};
});

我已经在

指令

端更新了您的代码，包括

指令

范围对象，用于

ngShow

。更新激励

范围后。$watch

可查看

ngShow

值的更改

查看

<div ng-app='app'>
  <div ng-controller='testController'>
    <dialog ng-show='showDialog'>
      <p>
        I'm a dialog
      </p>
    </dialog>
    <button ng-click='showHideDialog()'>
      Show/Hide
    </button>
  </div>
</div>

我是一个对话者

显示/隐藏

控制器和指令

var app = angular.module('app', []);
app.directive('dialog', function() {
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    scope: {
        ngShow:'='
    },
    template: '<div class="dialog">' +
      '<div class="overlay"></div>' +
      '<div class="body" ng-transclude>' +

      '</div>' +
      '</div>',
    link: function(scope, element, attributes) {
      scope.$watch('ngShow',function() {
        console.log('visibility of dialog changed to ', element.is(':visible'));
      }, function() {
        console.log('visibility of dialog changed to ', element.is(':visible'));
      });
    }
  };
});
app.controller('testController', function($scope) {
  $scope.showHideDialog = function() {
    $scope.showDialog = !$scope.showDialog;
  };
});

var-app=angular.module（'app'，[]）；
app.directive（'dialog'，function（）{
返回{
限制：'E'，
替换：正确，
是的，
范围：{
ngShow:“=”
},
模板：“”+
'' +
'' +
'' +
'',
链接：功能（范围、元素、属性）{
作用域：$watch（'ngShow'，function（）{
console.log（'对话框的可见性更改为'，element.is（':visible'）；
}，函数（）{
console.log（'对话框的可见性更改为'，element.is（':visible'）；
});
}
};
});
app.controller（'testController'，函数（$scope）{
$scope.showHideDialog=函数（）{
$scope.showDialog=！$scope.showDialog；
};
});

---

我已经在

指令

端更新了您的代码，包括

指令

范围对象，用于

ngShow

。更新激励

范围后。$watch

可查看

ngShow

值的更改

查看

<div ng-app='app'>
  <div ng-controller='testController'>
    <dialog ng-show='showDialog'>
      <p>
        I'm a dialog
      </p>
    </dialog>
    <button ng-click='showHideDialog()'>
      Show/Hide
    </button>
  </div>
</div>

我是一个对话者

显示/隐藏

控制器和指令

var app = angular.module('app', []);
app.directive('dialog', function() {
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    scope: {
        ngShow:'='
    },
    template: '<div class="dialog">' +
      '<div class="overlay"></div>' +
      '<div class="body" ng-transclude>' +

      '</div>' +
      '</div>',
    link: function(scope, element, attributes) {
      scope.$watch('ngShow',function() {
        console.log('visibility of dialog changed to ', element.is(':visible'));
      }, function() {
        console.log('visibility of dialog changed to ', element.is(':visible'));
      });
    }
  };
});
app.controller('testController', function($scope) {
  $scope.showHideDialog = function() {
    $scope.showDialog = !$scope.showDialog;
  };
});

var-app=angular.module（'app'，[]）；
app.directive（'dialog'，function（）{
返回{
限制：'E'，
替换：正确，
是的，
范围：{
ngShow:“=”
},
模板：“”+
'' +
'' +
'' +
'',
链接：功能（范围、元素、属性）{
作用域：$watch（'ngShow'，function（）{
console.log（'对话框的可见性更改为'，element.is（':visible'）；
}，函数（）{
console.log（'对话框的可见性更改为'，element.is（':visible'）；
});
}
};
});
app.controller（'testController'，函数（$scope）{
$scope.showHideDialog=函数（）{
$scope.showDialog=！$scope.showDialog；
};
});

---

也许他不想在他的指令中引入范围<代码>作用域：false非常明确。可能他不想在他的指令中引入作用域<代码>范围：false非常明确。