Question

我对指令的工作原理感到困惑，我感觉我错误地使用了它们。

我的目标是使用该指令显示一个弹出窗口，其中包含一个文本输入和提交按钮。

单击该按钮将触发一个提交文本输入值的ajax POST。

我感到困惑的是我如何以及在何处定义绑定输入的模型和执行它的函数。

我知道我可以在主控制器上创建函数和属性并将它们传递给范围变量，但这对我没有意义，因为该函数与指令隔离...

我也不认为我应该将这些添加到链接函数中的范围变量，因为我不想操纵控制器范围，因为那似乎是一个坏主意。

但是我没有看到任何放置我的指令模型和函数的机制，所以我应该使用不同的工具吗？我想要指令，所以我可以将它声明为像

这样的元素

<my-popup />

但我不知道如何使用自己的属性和函数赋予此指令自己的范围......

我是否错误地使用了这个，或者我应该使用其他东西，最重要的是，为什么？

我希望这是解释我的问题的足够信息，我太新了，无法用一个片段来解释这个......

感谢

Answer 1

Angular中的指令可以有自己的作用域，它可以从父控制器作用域继承（使用scope:true），也可以使用隔离范围（使用scope:{}），如名称所示。 / p>

如果在指令（继承或隔离）中创建新范围，则可以在其上附加属性和函数，它不会影响父范围。

这可以在链接函数中完成，或者有一个controller属性，它具有控制器功能。有关详细信息，请参阅this answer。

将数据传递给you指令的方式取决于如何创建范围。如果使用scope：true，则指令作用域可以访问在父作用域上定义的所有数据，而如果使用隔离作用域，则需要使用指令指南中描述的机制传递数据。请仔细阅读。

Answer 2

以下是如何设置指令Controller的框架。可能存在一些语法错误。请注意，在控制器中，您可以传入一个服务（我称之为我的dataService）来处理您的http调用。代码html代码的链接位于模板中。此URl是通过配置文件中的路由设置的。

app.directive('test', function() {
  return {
    restrict: 'E',
    replace: true,
    templateUrl: ‘/url’,//set up in your routing
    scope{
        variable:”=“ // passed in from parent on directive
    }
    controller: “myController”
        link: function(scope, elem, attrs) {
    }
 };
});
app.controller("myController", [       
    “$scope",'dataService',function($scope,dataService) {
    dataService.getCall()
});

<my-popup  variable=“variableFromParent”/>

绑定到AngularJS指令中的新属性

2 个答案: