Angular UI Bootstrap单个uib-alert点击关闭按钮无响应问题求助

嘿，我来帮你搞定这个alert关闭的问题！你的代码逻辑方向是对的，但问题出在ng-if创建的子作用域和原始类型变量的作用域继承上，或者你也可以用更简洁的方式直接绑定变量来解决。

问题根源 #

ng-if指令会创建一个新的子作用域，而你的projCompleteSuccess是布尔值（原始类型）。当子作用域继承父作用域的这个变量时，会创建一个本地副本；当你在控制器的closeCompleteProjectAlert函数里修改父作用域的projCompleteSuccess为false时，子作用域里的副本依然是true，所以alert不会消失。

解决方案（三种可选） #

方案1：用对象包裹变量（推荐，避免作用域问题）

把布尔值放到一个对象里，利用引用类型的特性，让子作用域和父作用域操作同一个对象：
控制器代码：

$scope.alertState = {
  projCompleteSuccess: true
};

$scope.closeCompleteProjectAlert = function(){
  $scope.alertState.projCompleteSuccess = false;
};

HTML代码：

<uib-alert type="danger" close="closeCompleteProjectAlert()" ng-if="alertState.projCompleteSuccess"></uib-alert>

方案2：替换ng-if为ng-show

ng-show不会创建新的作用域，只是通过CSS控制显示/隐藏，所以直接修改父作用域的变量就能生效：
控制器代码不变，修改HTML：

<uib-alert type="danger" close="closeCompleteProjectAlert()" ng-show="projCompleteSuccess"></uib-alert>

方案3：直接在close属性里赋值（最简洁）

不需要额外的函数，直接在close属性里修改变量，这样表达式会正确作用到父作用域的变量上：
HTML代码：

<uib-alert type="danger" close="projCompleteSuccess = false" ng-if="projCompleteSuccess"></uib-alert>

控制器代码只需要保留变量定义：

$scope.projCompleteSuccess = true;

随便选一种都能解决你的问题，推荐方案1或者3，更符合Angular的最佳实践~

内容的提问来源于stack exchange，提问作者Ruchi Gupta