javascript angularjs 一个元素上的两个指令

angularjs two directives on one element

提问by Noampz

I have two directives:

我有两个指令：

// Generated by CoffeeScript 1.6.3
app.directive("focusMe", function() {
  return {
    scope: {
      focus: "=focusMe"
    },
    link: function(scope, element) {
      return scope.$watch("focus", function(value) {
        if (value === true) {
          element[0].focus();
          return scope.focus = false;
        }
      });
    }
  };
});

and:

和：

// Generated by CoffeeScript 1.6.3
app.directive("cleanMe", function() {
  return {
    scope: {
      clean: "=cleanMe"
    },
    link: function(scope, element) {
      return scope.$watch("clean", function(value) {
        if (value === true) {
          element[0].value = "";
          return scope.clean = false;
        }
      });
    }
  };
});

and this input (angularUI):

和这个输入（angularUI）：

<input type="text" ng-model="addUserSelected" typeahead="emp.value for emp in allUsers | filter:$viewValue | limitTo:5" typeahead-editable="false" typeahead-on-select="addLine($item.id)" focus-me="usersFocusInput" clean-me="usersCleanInput">

I get this error:

我收到此错误：

Error: [$compile:multidir] http://errors.angularjs.org/1.2.3/$compile/multidir?p0=cleanMe&p1=focusMe&p…2%20focus-me%3D%22usersFocusInput%22%20clean-me%3D%22usersCleanInput%22%3E

what do I do wrong?

我做错了什么？

If I remove the clean-me property from the html it works.

如果我从 html 中删除 clean-me 属性，它会起作用。

Thanks

谢谢

采纳答案by Noampz

I found the solution finally :)

我终于找到了解决方案:)

// Generated by CoffeeScript 1.6.3
app.directive("focusMe", function() {
  return {
    link: function(scope, element, attributes) {
      return scope.$watch(attributes.focusMe, function(value) {
        if (scope[value] === true) {
          element[0].focus();
          return scope[attributes.focusMe] = false;
        }
      });
    }
  };
});

// Generated by CoffeeScript 1.6.3
app.directive("cleanMe", function() {
  return {
    link: function(scope, element, attributes) {
      return scope.$watch(attributes.cleanMe, function(value) {
        if (value === true) {
          element[0].value = "";
          return scope[attributes.cleanMe] = false;
        }
      });
    }
  };
});

In the html usersFocusInput and usersCleanInput are parameters in the scope that is wht I use scope[attributes.focusMe] to get this parameter and change him to false.

在 html 中，usersFocusInput 和 usersCleanInput 是范围内的参数，我使用 scope[attributes.focusMe] 来获取此参数并将其更改为 false。

<input type="text" ng-model="addUserSelected" typeahead="emp.value for emp in allUsers | filter:$viewValue | limitTo:5" typeahead-editable="false" typeahead-on-select="addLine($item.id)" focus-me="usersFocusInput" clean-me="usersCleanInput">

回答by Erik Honn

There is no real need for isolated scopes here. Use a "normal" directive scope and the directive will just inherit from the parent, like this:

这里没有真正需要隔离的范围。使用“普通”指令范围，该指令将仅从父级继承，如下所示：

// Generated by CoffeeScript 1.6.3
app.directive("focusMe", function() {
  return {
    link: function(scope, element, attrs) {
      return scope.$watch(attrs.focusMe, function(focusMe) {
        if (focusMe.value === true) {
          element[0].focus();
          return scope[attrs.focusMe].value = false;
        }
      });
    }
  };
});

// Generated by CoffeeScript 1.6.3
app.directive("cleanMe", function() {
  return {
    link: function(scope, element, attrs) {
      return scope.$watch(attrs.cleanMe, function(cleanMe) {
        if (cleanMe.value === true) {
          element[0].value = "";
          return scope[attrs.cleanMe].value = false;
        }
      });
    }
  };
});

---

---

Ignore this part if you already know how inheritance works, just adding for completeness:

如果您已经知道继承是如何工作的，请忽略这部分，只是为了完整性而添加：

Note that I am using the [attrs.focusMe].value, not just [attrs.focusMe]. The reason is how inheritance works in javascript. These directives are child scopes, so if you try to do scope[attrs.focusMe] = falseyou will set a local variable in the scope of the directive, i.e. you will not affect the parent scope (the controller where it is used). However, if you make the focusMe model (whatever it is) an object in the parent scope and then change a value on that object, then it will notset a local variable, it will instead update the parent. So:

请注意，我使用的是 [attrs.focusMe].value，而不仅仅是 [attrs.focusMe]。原因是继承在 javascript 中是如何工作的。这些指令是子作用域，因此如果您尝试执行scope[attrs.focusMe] = false您将在指令的作用域中设置一个局部变量，即您不会影响父作用域（使用它的控制器）。但是，如果您使 focusMe 模型（无论它是什么）成为父作用域中的对象，然后更改该对象上的值，则它不会设置局部变量，而是会更新父对象。所以：

scope[attrs.focusMe] = false; // Sets a local variable, does not affect the parent
scope[attrs.focusMe].value = false; // Updates focusMe on the parent

Here is a good answer about inheritance if you want an in depth guide: What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

如果您想要深入的指南，这里有一个关于继承的很好的答案：AngularJS 中范围原型/原型继承的细微差别是什么？

回答by musically_ut

You have two directives which require isolated scope on the same element which is not allowed.

您有两个指令需要在同一元素上隔离范围，这是不允许的。

The reason this is not allowed is because if you have some template {{...}}code inside the directive, then it will be unclear which scope it should take its values from.

不允许这样做的原因是，如果您{{...}}在指令中有一些模板代码，那么将不清楚它应该从哪个范围获取其值。

Consider instead of isolating scope, using attribute.$observeto watch the cleanMeand focusMeproperties and acting on those.

考虑而不是隔离范围，使用attribute.$observe观察cleanMe和focusMe属性并对其进行操作。

app.directive("focusMe", function() {
  return {
    link: function(scope, element, attributes) {
      attributes.$observe("focusMe", function(value) {
        if (value === true) {
          element[0].focus();
          scope.focus = false;
        }
      });
    }
  };
});

and:

和：

app.directive("cleanMe", function() {
  return {
    link: function(scope, element, attributes) {
      attributes.$observe("cleanMe", function(value) {
        if (value === true) {
          element[0].value = "";
          return scope.clean = false;
        }
      });
    }
  };
});