1

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

4

2 回答 2

3

您可以使用 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/

于 2013-09-11T20:59:39.917 回答
2

您可以使用 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以获取演示

于 2013-09-11T21:09:24.187 回答