Javascript 如何使用angularjs添加google webkit

我需要将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>'
};});

myApp.directive（'expando'，function（）{
返回{
限制：“A”，
范围：{
},
控制器：['$scope'，函数（$scope）{
$scope.open=false；
}],
链接：函数（$scope、elem、attrs、ctrl）{
$scope.toggleState=函数（）{
如果（$scope.open）{
$scope.open=false；
}否则{
$scope.open=true；
}
};
},
替换：正确，
是的，
模板：'+'
};});

可能会做你需要的事。

---

这里有一个fiddle-

您可以使用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>'
};});

myApp.directive（'expando'，function（）{
返回{
限制：“A”，
范围：{
},
控制器：['$scope'，函数（$scope）{
$scope.open=false；
}],
链接：函数（$scope、elem、attrs、ctrl）{
$scope.toggleState=函数（）{
如果（$scope.open）{
$scope.open=false；
}否则{
$scope.open=true；
}
};
},
替换：正确，
是的，
模板：'+'
};});

可能会做你需要的事。 这是一把小提琴-

，为了简单的效果：

HTML

CSS

有关演示和简单效果，请参见：

HTML

CSS

---

查看演示

听起来像是要为

鼠标盖

使用自定义指令，从那里开始。您知道有人在哪里实现了webkit吗？？！还没有看到GWT与Angular一起使用，通常是一个或另一个。听起来您想为

鼠标上方使用自定义指令，从那里开始。您知道有人在哪里实现了webkit吗？？！没有见过GWT与Angular一起使用，通常是一个或另一个。
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;
    }
}]);

.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;
}