Question

http://plnkr.co/edit/I30bgBrsO1Wo3JCcbUmK?p=preview

指令html中的ng-class切换：
ng-class="{true: "main.success", false: "main.error"}

完整的HTML

<body ng-app="myApp" ng-controller="MainCtrl as main">
    <notification-msg></notification-msg>

    <button ng-click="main.openAlert('success')">Click for success</button>

    <button ng-click="main.openAlert('error')">Click for error</button>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
    <script src="alert.js"></script>
    <script src="script.js"></script>
</body>

MainCtrl

(function() {
    var app = angular.module('myApp', ['notification-directives'])
    .controller('MainCtrl', ['$scope', function($scope) {

        var vm = this;

        vm.openAlert = function(m) {
            console.log(m);
            vm.message = m;
            vm.notification = m;

            // trying to toggle the ng-class in the directive here
            if (m === 'success') {
                vm.success = true;
            } else if (m === 'error') {
                vm.error = false;
            }
       }
    }]);
})();

通知指令

(function() {
    var app = angular.module('notification-directives', [])
    .directive('notificationMsg', function () {

        return {
            restrict: 'E',
            template: 
                '<section ng-show="main.notification" ' +
                    'class="ng-notification"> ' +
                    '<p class="notify-msg">{{main.message}}</p> ' +
                    '<div class="notify-bg ng-class="{true: "main.success", false: "main.error"} success"></div> ' +
                '</section>'
        };
    });
})();

Answer 1

要在ng-class中形成if子句，只需使用

即可

ng-class="main.success?'success':'error'"

Here是您的修改者，因此它可以正常工作。不幸的是，我不得不添加一个模板文件，使报价更容易阅读。

此外，我删除了您的vm.error并在true和false之间切换vm.success。

Answer 2

如果完整部分应具有背景颜色，则可以使用

class="ng-notification  {{main.message}}"

因为main.message中的字符串等于您要添加的类。

如果您使用

，则可以使用main.openAlert（''）隐藏

ng-show="(main.message)"

http://plnkr.co/edit/GPlhqG19BwdgAhsOwt31?p=preview

Answer 3

有一些事情可以使这项工作

查看example

首先使用1变量来确定失败或成功，在我的情况下，我使用了＆＃39;成功＆＃39;这是成功时是真的，当它是错误时是假的

vm.openAlert = function(m) {
  console.log(m);
  vm.message = m;
  vm.notification = m;

  vm.success = (m === 'success');
}

指令中的第二个更改ng-class位置和ng-class字符串

    return {
        restrict: 'E',
        template: 
            '<section ng-show="main.notification" ' +
                  'class="ng-notification" ng-class="{success: main.success, error: !main.success}"> ' +
                  '<p class="notify-msg">{{main.message}}</p> ' +
                  '<div class="notify-bg></div> ' +
              '</section>'
    };

你已经完成了！

如何在Controller中切换此notificationreire中的ng-class？

3 个答案: