Question

我在Apache Cordova和AngularJS中编写了一个益智应用程序。拼图由网格组成，每个网格中都有多个“灯”。

当您将其中一个灯光鼠标悬停时，某些区域会亮起。我在标准jQuery中运行良好，鼠标悬停事件绑定到类，但我很难让它在AngularJS中运行。我可以在项目中包含完整的jQuery - 但这感觉就像是作弊。

到目前为止，我有以下指令： -

// Create a new set of credentials for the application
var appCredentials = new TwitterCredentials("CONSUMER_KEY", "CONSUMER_SECRET");

// Go to the URL so that Twitter authenticates the user and gives him a PIN code
var url = CredentialsCreator.GetAuthorizationURL(appCredentials);

// This line is an example, on how to make the user go on the URL
Process.Start(url);

// Ask the user to enter the pin code given by Twitter
var pinCode = Console.ReadLine();

// With this pin code it is now possible to get the credentials back from Twitter
var userCredentials = CredentialsCreator.GetCredentialsFromVerifierCode(pinCode, appCredentials);

// Use the user credentials in your application
Auth.SetCredentials(userCredentials);

HTML看起来像： -

app.directive('etkHighlight', function () {
    return {
        link: function (scope, element, attr) {
            element.on("mouseenter", function () {
                var id = attr.cage;
                var el = angular.element(document).find(id);
                el.addClass("etk-light-on");
                console.log("enter")
            })
            element.on("mouseleave", function () {
                var id = attr.cage;
                console.log("enter")
            })
        }
    }
});

我得到了我需要更改类OK的对象的id，并且el填充了某些东西但是addClass无法实际添加该类。

我做错了什么？这是解决这个问题的正确方法吗？理想情况下，我想要一些东西来管理所有灯光鼠标悬停的类更改。

Plnkr： - http://plnkr.co/edit/JjwucC3HECN9Mmm4S3Ib请注意标有l，k＆amp;的灯光。 m行在顶行设置为使用指令

更新我意识到我没有很好地定义这个问题。例如，当鼠标悬停时，标记为“l”的灯光，我想要改变那两个光线的类别，并且向右和向下找到“L”方形....

Answer 1

要以角度方式更改类，您应该查看与Angular捆绑在一起的ng-class指令：

Angular ng-class

简而言之，您的添加类代码将被删除，您将使用有角度的方式更改样式。例如

然后在您的代码集中根据单击将高亮显示变为true / false。请查看文档中的示例并相应地进行调整。

Answer 2

我在你的笔上工作的东西是不对的代码我必须更多地进入它。也用其他的替换你的指令但仍然没有工作。你可以去ng-class，ng-mouseenter或ng-mouseleave您也可以使用ng-style或将函数传递给style属性。

directives.directive('showonhoverparent',
   function() {
      return {
         link : function(scope, element, attrs) {
            element.parent().bind('mouseenter', function() {
                element.show();
            });
            element.parent().bind('mouseleave', function() {
                 element.hide();
            });
       }
   };
});

希望这对您有用，我会更深入地研究您的代码以找到确切的问题。

Answer 3

这会有效，我在enter中使用了leave和html来传递要附加的class个名称，并在link函数中使用directive将attrs.enter检索为attrs.leave＆amp; *.html

<body ng-app='app'> <div etk-highlight enter='red' leave='black'>test</div> </body>档案： -

*.js

var app = angular.module('app', []) .directive('etkHighlight', function () { return { restrict: 'A', link: function (scope, element, attrs) { element.on("mouseenter", function () { element.removeClass(attrs.leave); element.addClass(attrs.enter); }); element.on("mouseleave", function () { element.removeClass(attrs.enter); element.addClass(attrs.leave); }); } } });档案： -

*.css

.red { color:red; } .black { color:black; }档案： -

echo $this->Form->input('name');
echo $this->Form->input('username');
echo $this->Form->input('email');
echo $this->Form->button('ajax_button');

在AngularJS中更改多个元素的类

3 个答案: