如何使用 AngularJS 添加 Google WebKit

how to add google webkit using angularjs

本文关键字：Google WebKit 添加 AngularJS 何使用      更新时间：2023-09-26

我需要将Google webkit功能添加到我的应用程序中。我想要类似于我们现在在 gmail 中拥有的东西，一旦我们将鼠标放在"+"符号上，它就会展开并为我们提供各种选项，例如"插入照片"、"插入链接"等。我是 angularjs 的新手，任何帮助将不胜感激。

您可以使用 ng-mouseenter 和 ng-mouseleave，一个简单的指令，如下所示 

myApp.directive('expando', function () {
return {
    restrict: 'A',
    scope: {
    },
    controller: ['$scope', function ($scope) {
        $scope.open = false;
    }],
    link: function ($scope, elem, attrs, ctrl) {
        $scope.toggleState = function () {
            if ($scope.open) {
                $scope.open = false;
            } else {
                $scope.open = true;
            }
        };
    },
    replace: true,
    transclude: true,
    template: '<div ng-mouseenter="toggleState()" ng-mouseleave="toggleState()"> <span ng-hide="open" class="sectionIndicator">+</span> <div ng-show="open" class="inline" ng-transclude></div> </div>'
};});

可能会做你需要的。这是一个小提琴 - http://jsfiddle.net/LukeMaso/LwFws/

您可以使用 ngMouseover、ngMouseleave 和 ngGlass 来实现简单的效果：

.HTML 

<!DOCTYPE html>
<html data-ng-app="demoApp">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
        <link rel="stylesheet" href="style.css" />
        <script src="script.js"></script>
    </head>
    <body>
        <h1>Hello Plunker!</h1>
        <div class="menu" data-ng-controller="MenuController">
            <div class="button" data-ng-mouseover="expand($event)" data-ng-class="{hidden:expanded}">
                +
            </div>
            <div class="button-shell" data-ng-class="{expanded:expanded}" data-ng-mouseleave="collapse($event)">
                <div class="button">
                    1
                </div>
                <div class="button">
                    2
                </div>
                <div class="button">
                    3
                </div>
            </div>
        </div>
    </body>
</html>

.JS

var m = angular.module('demoApp', []);
m.controller('MenuController', ['$scope', function($scope){
    $scope.expanded = false;
    $scope.expand = function(event){
        $scope.expanded = true;
    }
    $scope.collapse = function(event){
        $scope.expanded = false;
    }
}]);

.CSS

.menu {
    background-color: #f5f5f5;
    border-top: 1px solid #cfcfcf;
    height: 31px;
    cursor: pointer;
}
.button-shell {
    height: 31px;
    display: none;
}
.button {
    height: 31px;
    width: 31px;
    line-height: 31px;
    text-align: center;
    display: inline-block;
}
.hidden {
    display: none;
    opacity: 0;
}
.expanded {
    display: inline-block;
}

请参阅此 plunker 进行演示

相关文章：