Javascript 使用ng模型、bindToController在一个页面上显示多个指令

我已经创建了一个电子邮件订阅指令，你将它附加到一个表单上，然后在提交时，它会向活动监视器yada yada ya发送电子邮件

不过我遇到了一个奇怪的问题，ng模型正在脱离一个孤立的作用域和bindToController

角度指令：

    angular.module('quiip.directives')
    .directive('subscribeToNewsletter', subscribeToNewsletterDirective);

    function subscribeToNewsletterDirective(){
        return {
            restrict: 'A',
            scope: {},
            bindToController: true,
            controllerAs: 'subscribe',
            controller: subscribeToNewsletterCtrl,
            link: function(scope, el){
                el.addClass('subscribe-to-newsletter');
            }
        }
    }

HTML表单，一般结构。这取决于表单的使用位置。这是硬编码的（即不是模板）：

订阅！
订阅时事通讯

表格的另一个示例：

    <form class="row" subscribe-to-newsletter ng-submit="subscribe.submitEmailSubscribe()" ng-class="{ error : subscribe.states.error, success : subscribe.states.success }">
        <div class="status-icon loading" ng-show="subscribe.states.loading"><i class="fa fa-circle-o-notch fa-spin"></i></div>
        <div class="status-icon success" ng-show="subscribe.states.success"><i class="fa fa-check"></i> Subscribed!</div>
        <div class="small-12 medium-6 columns">
            <input type="email" ng-model="subscribe.email" placeholder="email" name="email-address">
        </div>
        <div class="small-12 medium-6 columns">
            <button type="submit" class="expand">Subscribe</button>
        </div>
    </form>

订阅！
订阅

正如您所看到的，

ng模型

正在脱离孤立的作用域和controllerAs/bindToController（我甚至不确定我是否需要同时使用这两个？），并在页面上传播

---

我做错了什么？

您将用于隔离作用域的指令与用于操作DOM的指令混合在一起

隔离范围 根据创建隔离作用域允许您

将指令内的作用域与指令外的作用域分开，然后将外部作用域映射到指令的内部作用域

如果要将表单的作用域隔离在父作用域内，并将模型公开给该父作用域，可以像以下方式实现它：

<!-- parent template -->
<div> <!-- just an example parent template -->

    <subscribe-to-newsletter subscribe-email="subscribe.email"></subscribe-to-newsletter>

</div>

操纵DOM 要操作DOM，您可以创建一个返回链接函数的指令（与您已经在做的差不多，但没有隔离作用域）

这方面的一个很好的例子是。对于您的编码样式，您的指令可能如下所示：

angular.module('quiip.directives')
    .directive('subscribeToNewsletter', subscribeToNewsletterDirective);

    function subscribeToNewsletterDirective() {
        return {
            link: link
        }

        function link(scope, element, attrs) {
            element.addClass('subscribe-to-newsletter');
        }
    }

最后

---

如果在不同的视图中有两个不同的表单，它们都使用相同的模型名，那么最好为每个视图使用不同的控制器，以避免名称空间冲突。

这与指令无关。您只是对这两个字段使用了相同的模型

ng model=“subscribe.email”

。谢谢-我的印象是

subscribe.email

将在独立的指令作用域上使用subscribe对象-因此在整个页面上没有冲突。我使用ng模型访问隔离指令范围内的电子邮件值！感谢@br3w5给出了非常详细的答案。。。使用element指令的问题是，我不能为每个实例的表单设置不同的布局。这就是使用属性的想法——我可以将功能附加到任何表单，它都可以工作。我想我想在指令中隔离email字段，这样它就不会传播到父范围。我可以使用el.find（'input'）val绕过ng模型，但这看起来不像是有棱角的方式……因此，指令的目的只是获取电子邮件地址并将其发送给活动监视器？为什么不使用服务或工厂呢？

<form ng-submit="subscribe.submitEmailSubscribe()".... <!-- note no use of directive name here -->
    ...
</form>

// subscribeToNewsletter.directive.js
angular.module('quiip.directives')
.directive('subscribeToNewsletter', subscribeToNewsletterDirective);

function subscribeToNewsletterDirective() {
    return {
        restrict: 'A',
        scope: {
            subscribeEmail: '=' // bi-directional binding to the model passed into your template handy for attaching data to a parent form object
        },
        bindToController: true,
        controllerAs: 'subscribe',
        controller: subscribeToNewsletterCtrl,
        replace: true,
        templateUrl: 'path/to/your/form/template'
    }
}

angular.module('quiip.directives')
    .directive('subscribeToNewsletter', subscribeToNewsletterDirective);

    function subscribeToNewsletterDirective() {
        return {
            link: link
        }

        function link(scope, element, attrs) {
            element.addClass('subscribe-to-newsletter');
        }
    }