Question

我有一个显示通知的简单指令，用户可以点击它来关闭它。它不能按预期工作（一旦用户隐藏它不再显示）在离子中，同样的东西它只在角度上工作。

这是指令代码

angular.module('app').directive('notificationBar', [function(){
return {
    restrict : 'A',
    scope : {
      msg : '@',
      type : '@',
      show : '='
    },
    template : '<div ng-click="hideIt()" ng-show="show" class="alert {{type}}"><span>&times;</span> {{ msg }}</div>',
    link : function ( scope, elem, attr ) {
      scope.type = attr.type || 'alert-danger';

      scope.hideIt = function () {
          scope.show = false;
      };

      // for debugging 
      scope.$watch('show', function(newValue, oldValue) {
        console.info('old show val', oldValue);
        console.info('new show val', newValue);
      });

     }
   };
}]);

Answer 1

看起来像角色js中的点规则在这里应该受到指责。因为error是原始值，所以一旦在控制器范围内发生了变化，该指令所关注的变量就是指旧值。

为什么网络和离子之间存在差异，不确定。但要解决此问题，请在对象和用户error内扭曲dot notation以访问它。

像这样：

$scope.error = {
   error: true
};

<div notification-bar show="error.error" msg="Something is wrong here :( " type="alert-danger"></div>

这是更新后的代码笔：http://codepen.io/anon/pen/BjrRRJ?editors=1011

有关我提到的dot rule的更多信息，这里有一个很好的stackoverflow帖子值得一读：https://stackoverflow.com/a/17607794/841804和https://stackoverflow.com/a/14049482/841804

离子

1 个答案: