Question

我们想在angularjs应用程序中编写一个对话框指令，但是有一些难以决定的东西。

说我在HTML上有一些按钮，我们想写一个指令＆＃39; popup＆＃39;：

<div>
  <button popup>Email</button>
  <button popup>Phone</button>      
  <button popup>Other</button>
</div>

单击该按钮时，它将显示带有某些内容的弹出对话框。 3个按钮之间存在一些常见的UI行为，以及一些不同的逻辑。

选项1（无控制器）

我们定义了3个指令，例如popup-email，popup-phone，popup-other：

app.directive('popup-email', ['user', 'ngDialog', function(user, ngDialog) {
    return {
       link: function(scope, element, attrs) {
          if(user.email) {
            ngDialog.open({...});
          } else {
            element.addClass("disabled");
          }
       }
    }
}]);

app.directive('popup-phone', ['user', 'ngDialog', function(user, ngDialog) {
    return {
       link: function(scope, element, attrs) {
          if(user.phone) {
            ngDialog.open({...});
          } else {
            element.addClass("disabled");
          }
       }
    }
}]);

app.directive('popup-other', ['user', 'ngDialog', function(user, ngDialog) {
    return {
       link: function(scope, element, attrs) {
          if(user.other) {
            ngDialog.open({...});
          } else {
            element.addClass("disabled");
          }
       }
    }
}]);

HTML：

<div>
  <button popup-email>Email</button>
  <button popup-email>Phone</button>      
  <button popup-email>Other</button>
</div>

在这个选项中，我们将定义3个指令，没有控制器。好的部分是每个按钮都是带指令的独立按钮，所有逻辑都在指令内。不好的部分是我们在每个指令中都有一些业务逻辑，并且在所有3个指令中都有一些共同的逻辑。

选项2（带控制器）

我们将只为命令行为提供一个指令，并为差异提供一个控制器：

app.directive('popup', ['ngDialog', function(ngDialog) {
    return {
       link: function(scope, element, attrs) {
          if(attrs.enable==="true") {
            ngDialog.open({...});
          } else {
            element.addClass("disabled");
          }
       }
    }
}]);

app.controler('ContactController', function(scope, user) {
    scope.enableEmail = if(user.email) true else false;
    scope.enablePhone = if(user.phone) true else false;
    scope.enableOther = if(user.other) true else false;
});

HTML将是：

<div>
  <button popup enable="{{enableEmail}}">Email</button>
  <button popup enable="{{enablePhone}}">Phone</button>      
  <button popup enable="{{enableOther}}">Other</button>
</div>

对于这个选项，好的部分是指令是可重用的，但是我们必须为它们定义一个控制器。

Answer 1

第二个选项是错误的，将用户传递给指令和控制器都很奇怪。此外，如果您在控制器中有它，我会将其传递给查看并确定＆＃34;启用＆＃34;属于那里。

但是当我谈到传递＆＃34;用户＆＃34;作为依赖的指令。我不确定你是否真的想这样做，我宁愿将数据传递给使用属性的指令，但我不知道你的确切用例，所以由你决定。

如果你坚持以这种方式传递用户，我会建议更聪明的指令，接受已启用的字段。

<button popup="email">Email</button>

在属性指令上使用隔离范围时，您也可以使用该属性通过字段名称传递字符串值，这样您就可以获取字段，然后使用

确定要执行的操作

app.directive('popup', function (..) {
...
return {
   restrict : "A",
   scope : {
     field-name : "@popup"
   },
   link: function(scope, element, attrs) {
      ...

在这种情况下，我应该使用“指令”或“控制器”吗？

选项1（无控制器）

选项2（带控制器）

1 个答案: