tip

by Kuitos Lau

HTML

<script src="//cdn.bootcss.com/angular.js/1.5.6/angular.js"></script>
<script src="//cdn.bootcss.com/angular.js/1.5.6/angular-resource.js"></script>
<script src="//cdn.bootcss.com/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<script src="//unpkg.com/ccms-components/ccms-components.js"></script>
<link rel="stylesheet" href="//unpkg.com/ccms-components/ccms-components.css">
<cc-tips msg="普通常显<span style='color:red;display:inline-block'>提示</span>"></cc-tips>

<cc-tips style="max-width: 300px" msg="普通常显提示,当提示文字多时,右侧需要出现展开icon,点击展开更多查看更多内容.普通常显提示,当提示文字多时,右侧需要出现展开icon,点击展开更多查看更多内容."></cc-tips>

<cc-tips msg="重要常显提示" type="major"></cc-tips>

<cc-tips msg="警告常显提示" type="warning"></cc-tips>

<button type="button" ng-click="showSuccess()">show success</button>

<button type="button" ng-click="showError()">show error</button>

<ui-view>

</ui-view>

JavaScript

/**
 * @author Kuitos
 * @homepage https://github.com/kuitos/
 * @since 2016-03-08
 */
;
(function(angular, undefined) {

  'use strict';

  angular
    .module('app', ['ccms.components', 'ui.router'])
    .config(function($stateProvider, $urlRouterProvider) {

      $urlRouterProvider.otherwise('/app');

      $stateProvider
        .state('app', {
          url: '/app',
          template: '<div>' +
            '<h2>第一层容器</h2>' +
            '<ul>' +
            '<li><a ui-sref="app.container1">module1</a></li>' +
            '<li><a ui-sref="app.container2">module2</a></li>' +
            '</ul>' +
            '<ui-view></ui-view>' +
            '</div>'
        })
        .state('app.container1', {
          url: '/module1',
          template: '<span>第二层容器:container1</span>'
        })
        .state('app.container2', {
          url: '/module2',
          template: '<span>第二层容器:container2</span>'
        });

    })
    .controller('ctrl', function($scope, $ccTips, $ccModal) {

      let tips = null;

      $scope.showSuccess = function() {
        $ccTips.success('成功提示');
      };

      $scope.showError = function() {
        if (!tips || !tips.element) {
          tips = $ccTips.error('出错提示' + Math.random());
        }
      };

      $scope.showModal = function() {
        $ccModal.modal({

          title: 'tips in modal',
          body: '/demos/tips/modal-body.tpl.html',
          controller: ['$element', function($element) {

            this.showSuccess = function() {
              $ccTips.success('hhhhh', $element[0].querySelector('.modal-body'));
            };

            this.showError = function() {
              $ccTips.error('sssssss', $element[0].querySelector('.modal-body'));
            };

          }]

        }).open();
      };
    });

})(window.angular);