Question

最终目标：将多个电子邮件地址与频率设置（每日，每周，每月）相关联，并发送给通知。

我正在尝试定义一个作用于按钮元素的指令，这样，当单击该按钮时，它会从输入元素中获取电子邮件地址，并从按钮旁边的下拉列表中获取频率并插入它们在输入+按钮下面的列表中，将动态列表绑定到控制器上的属性，以便在用户提交表单时将其发送到服务器。

表格全部接通 - 这不是问题。

我只想帮助构建指令。

这是我到目前为止所拥有的：

HTML ：

<section ng-controller="notificationmanagement as vm">
    <input name="email" type="email"/>
    <select>
        <option>Daily</option>
        <option>Monthly</option>
        <option>Weekly</option>
    </select>
    <button data-cm-click type="button" class="btn btn-default"></button>
    <div ng-model="vm.Subscribers"></div>
</section>

指令：

commonModule.directive('cmClick', function () {
    return function (scope, element) {            
        element.bind("click", function () {

            // Is this the best way to get the value of the EmailAddress & Frequency?
            var emailAddress = element[0].parentElement.parentElement.children[0].value;
            var frequency = element[0].parentElement.parentElement.children[1].value;
            var spanEmailTag = angular.element('<span>' + emailAddress + '</span>');
            var spanFreqTag = angular.element('<span>' + frequency + '</span>');
            angular.element(spanEmailTag).appendTo(element[0].parentElement.parentElement);
            angular.element(spanFreqTag).appendTo(element[0].parentElement.parentElement);

            // How to make sure each added email+frequency is available 
            // in the array bound to 'vm.Subscribers'
        });
    }
});

'vm.Subscribers'的结构应该是这样的，以便服务器使用它：

vm.Subscribers = [ {'EmailAddress':'joe@email.com', 'Frequency':'Daily'}, {'EmailAddress':'bob@email.com', 'Frequency':'Monthly'} ];

注意：我理想喜欢在不依赖指令中的jQuery的情况下实现此目的。

任何和所有指针/帮助/建议都将非常感激！

Answer 1

如果要封装和重用某些功能，那么请务必使用指令。

但首先，要了解MVVM（Model-View-ViewModel）范例以及Angular如何实现它。

对于初学者，假设没有View（因此，没有DOM，指令等......），并且当$scope上显示某些内容时，用户输入魔法（或者，如果您使用ControllerAs - 作为控制器的属性）。现在，从控制器开始构建应用程序的功能。使用函数定义数据结构和行为。

app.controller("notificationmanagement", function(){
   // list of subscribers. You could also populate it from the backend. 
   this.subscribers = [];

   // this is where the details of a new subscriber will be stored
   // until subscriber is added
   this.newSubscriber = {EmailAddress: null, Frequency: null}; 

   // action to add a susbscriber
   this.addSubscriber = function(){
      this.subscribers.push(this.newSubscriber);

      // clear the object (it's not necessary to declare all the properties)
      this.newSubscriber = {};
   }
});

简而言之，您的所有应用都在做。控制器不会（也不应该）关注在视图中显示的。这就是为什么DOM操纵不受欢迎的原因，因为它打破了关注点的分离。

现在，到视图。 View主要是声明性的：

<section ng-controller="notificationmanagement as vm">
   <input ng-model="vm.newSubscriber.EmailAddress" type="email>
   <select ng-model="vm.newSubscriber.Frequency">
      <option value="Daily">Daily</option>
      <option value="Monthly">Monthly</option>
      <option value="Weekly">Weekly</option>
   </select>
   <button ng-click="vm.addSubscriber()"> Add </button>

   <hr/>

   <h3>All subscribers:</h3>
   <div ng-repeat="s in vm.subscribers">
      <span>{{s.EmailAddress}}</span>
      <span>{{s.Frequency}}</span>
   </div>
</section>

注意ng-model指令如何将输入数据绑定到控制器的数据。请注意在控制器上调用操作的ng-click。请注意ng-repeat根据该数据迭代并创建DOM元素。 View完全由数据驱动，由 ViewModel引用。

先了解这一点，然后转到指令。

AngularJS - 将输入值附加到列表并绑定到模型的指令

1 个答案: