AngularJS RibbonBar

• 下载源代码 - 4.3 MB

引言

网上有一些商业第三方 RibbonBar，但 AngularJS 准备好的非常少。在大多数情况下，它们是 JQuery-Angularised 版本。所以，我决定采用我的旧博客，关于扩展 JRibbon并使其可在 AngularJS 网站中使用。能够绑定控制器、指令、服务等。

外观

在下面，您可以立即看到您可以在 Web 应用程序中实现的目标，我有一个 RibbonBar，它在调用控制器后注入网格模板，该控制器又调用服务来检索数据并（ng-repeat）绑定到表。所以，您会看到，它基本上是一个普通的 RibbonBar，您可以轻松地将其整合到您的应用程序中。

项目结构

Visual Studio 2013 Web 解决方案由两个项目组成，一个是客户端 AngularJS 项目，另一个是托管在本地 IIS (Express) 上的 WEB API 项目，它有一个嵌入式数据库，为了简单起见（在App_Data文件夹中）。我有几个视图，即grid.html，它被“模板化”到index.html页面的内容 <Div> 中。

只需确保您在启动项目时具有以下解决方案属性（因为 WEB API 必须在 Web 客户端之前启动）。正如预期的那样，index.html 是客户端项目的启动页。

Using the Code

这个 AngularJS Ribbon 是基于我的 Jquery Ribbon 博客构建的，因此在渲染过程中仍然涉及到一些 JQuery。这发生在幕后，使用一个 JQuery 相关的文件“jquery.officebar.js”。之后，一切都是 HTML\CSS & AngularJS。

构建 Ribbon

让我们创建以下主页 Ribbon 选项卡。

<ul>
    <li class="current">
        <a href="#" rel="home">Home</a>
          <ul>
             <li>
             </li>
          </ul>
     </li>
</ul>

让我们创建剪贴板 Ribbon 面板。

<ul>
    <li class="current">
       <a href="#" rel="home">Home</a>
           <ul>
               <li>
                  <span>Clipboard</span>
                </li>
          </ul>
     </li>
</ul>

让我们创建显示 Ribbon 分裂按钮（减去任何 AngularJS 语法）。

<ul>
            <li class="current">
                <a href="#" rel="home">Home</a>
                <ul>
                    <li>
                        <span>Clipboard</span>
                        <div class="button split">
                            <a href="#" rel="paste">                                
                                <img src="Content/ribbon/images/paste32.png" 
                                alt="" /><span>Show</span>
                            </a>
                            <div>
                                <ul>
                                    <li class="menutitle">Paste Options</li>
                                    <li><a href="#">
                                    <img src="Content/ribbon/images/paste16.gif" 
                                    alt="" />Paste</a></li>
                                    <li><a href="#">Paste special...</a></li>
                                    <li class="separator"><a href="#">
                                    <img src="Content/ribbon/images/link16.gif" 
                                    alt="" />Paste link</a></li>
                                    <li class="menutitle">Clipboard options</li>
                                    <li><a href="#">Clear clipboard</a></li>
                                    <li><a href="#">
                                    <img src="Content/ribbon/images/pasteall16.gif" 
                                    alt="" />View clipboard content</a></li>
                                    <li><a href="#">Another</a></li>
                                </ul>
                            </div>
                        </div>

                  </li>
          </ul>
     </li>
</ul>

添加 AngularJS 语法

添加 AngularJS 属性非常简单，就像在普通的 HTML 页面中一样

指令 (ng-click, ng-hide, ng-init)

控制器 (Controller)

表达式

因为 AngularJS 是一种 MVC 设计模式，所以视图与代码松散耦合，因此当从 UI 调用控制器方法时，我们可以更新 UI 或从控制器注入新模板，而无需了解调用事件的 UI 或对象。

Controller 代码

我们可以使用 $scope 对象模型在控制器中设置表达式

$scope.isHidden = false;
$scope.PasteTitle = 'Service';        
$scope.TextToHide = "I will be hidden, by Service click";
$scope.isButtonHidden = true;

捕获按钮点击事件并通过调用 WEB API 服务并将结果绑定到模板网格。

/*================================================================================
        Author      : Bert O'Neill
        Method      : buttonClick
        Parameters  : N\A
        Date        : 01-Sep-2015
        History     : Initial Draft (01-Sep-2015)
        Description : Public method that will get activated when 
                      ng-click event triggered on button object within UI.
                      Call service to pull back all customer related data from database.
                      Bind results to parent scope, which in turn is bound to UI control
        Test Prj.   : N\A
        ================================================================================*/
        $scope.buttonClick = function (value) {
            $log.debug('Enter buttonClick');
            blockUI.start(); // block UI
            
            alert('Capture button click event of \'' + value + '\'');
            
            // change button caption
            $scope.isHidden = !$scope.isHidden;
            if ($scope.isHidden) $scope.PasteTitle = 'Show';
            else $scope.PasteTitle = 'Service';
            
            // call service
            ribbonService.getBurnfootBridgendBaghdadData() // pass back the promise and 
            // handle in controller (service is only a pass through\shared logic between ctrls)
                .then(function (results) {
                    $scope.$parent.people = results.data // update the parent scope 
                    			// as you have nested controllers in view
                },
                function (results) {
                    alert("Failed customer data request"); // log error
                });

            // redirect to display grid (partial) view
            $location.path('/grid');

            blockUI.stop(); // unblock UI
            $log.debug('Exit buttonClick');
        }

捕获选项卡点击事件

/*================================================================================
         Author      : Bert O'Neill
         Method      : tabClick
         Parameters  : N\A
         Date        : 01-Sep-2015
         History     : Initial Draft (01-Sep-2015)
         Description : Public method that will get activated when 
                       ng-click event triggered on tab object within UI.
                       Call service to pull back all customer related data from database.
                       Bind results to parent scope, which in turn is bound to UI control
         Test Prj.   : N\A
         ================================================================================*/
        $scope.tabClick = function (value) {
            $log.debug('Enter tabClick');
            blockUI.start(); // block UI

            alert('Capture tab click event of \'' + value + '\'');
          
            blockUI.stop(); // unblock UI
            $log.debug('Exit tabClick');
        }

结论

所以您可以看到，将 Microsoft Ribbon 样式的 AngularJS 控件整合到您的 AngularJS 应用程序中非常容易。我必须提到 AngularJS 控件才刚刚开始起步，像 Telerik 或 DevExpress 这样的第三方供应商现在正在进入 AngularJS 市场，但 AngularJS 控件还处于早期阶段，这就是为什么我认为您会看到 JQuery 控件和 AngularJS 在一段时间内仍然协同工作。