Question

我在学习AngularJS的第二天，有一个简单的例子，说明如何在用户操作上更改DOM，这对我来说不起作用。这是一个例子：

html文件：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title></title>
   <script src="../Scripts/angular.min.js"></script>
   <script src="../Scripts/Controllers/app.js"></script>
   <script src="../Scripts/jquery-1.4.1.min.js"></script>
</head>
<body ng-app="myApp">
   <my-widget>
      <p>Hello World</p>
   </my-widget>
</body>
</html>

带有指令行动的文件：

var app = angular.module('myApp', []);

app.directive("my-widget", function () {
    var linkFunction = function (scope, element, attributes) {
        var paragraph = element.children()[0];
        $(paragraph).on("click", function () {
            $(this).css({ "background-color": "red" });
        });
    };

    return {
        restrict: "E",
        link: linkFunction
    };
});

单击段落时没有任何反应。找不到原因。

Answer 1

只需将您的指令名称更改为camelCasing，其角度将转换为my-widget。此外，jQuery $别名不可用，不应与angular一起使用。您已经拥有该元素，因此请使用element.css()直接与其进行交互，以更改css属性。

此外，根据以下评论，将限制更改为＆＃34; A＆＃34;更有意义。或者＆＃34; EA＆＃34;并将该指令直接应用于您要更改的元素。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title></title>
   <script src="../Scripts/angular.min.js"></script>
   <script src="../Scripts/Controllers/app.js"></script>
</head>
<body ng-app="myApp">
  <div my-widget style="width: 300px; height: 200px; background-color: orange;">
    <p>Hello World</p>
  </div>
</body>
</html>

这也使您无需遍历子元素。

app.directive("myWidget", function () {
    var linkFunction = function (scope, element, attributes) {
        element.on("click", function () {
          element.css("background-color", "red");
        });
    };

    return {
        restrict: "EA",
        link: linkFunction
    };
});

请参见此工作plunker。

根据documentation：

Angular规范化元素的标记和属性名称以确定   哪些元素匹配哪些指令。我们通常会提到   它们区分大小写的camelCase规范化名称的指令（例如   ngModel）。但是，由于HTML不区分大小写，我们参考   DOM中的指令通过小写形式，通常使用   DOM元素上的破折号分隔属性（例如ng-model）。

规范化过程如下：

从元素/属性的前面剥离x-和data-。兑换   ：， - 或_分隔名称为camelCase。

AngularJS：无法使我的指令正常工作

1 个答案: