Javascript AngularJS指令中的双向数据绑定

我一直在尝试定义指令，以便根据存储在数据库中的字段类型及其参数，在表单中显示不同的“小部件”。我需要对不同类型的场景做出反应，因此需要指令来处理布局

在玩一些示例时，我想出了一个“有点”有效的代码：

HTML

指示

myApp.directive（'zippy'，function（）{
返回{
限制：“C”，
//此HTML将替换zippy指令。
是的，
作用域：{title:'=zippettle'}，
模板：“”，
//链接函数将向模板添加行为
链接：函数（范围、元素、属性）{
//标题元素
元素绑定（'blur keyup change'，function（）{
适用范围：$apply（读取）；
});
var input=element.children（）；
函数read（）{
scope.title=input.val（）；
}
}
}
});

---

这似乎是可行的（尽管明显比*property*angularJS变量绑定慢），但我认为一定有更好的方法来做到这一点。有人能解释一下这件事吗？

我不知道你为什么要手动触发

$apply

方法，因为你实际上不需要它

我从Angular页面编辑了您使用的示例，并包含了输入。 这对我很有用：

HTML

<div ng-app="zippyModule">
  <div ng-controller="Ctrl3">
    Title: <input ng-model="title">
    <hr>
    <div class="zippy" zippy-title="title"></div>
  </div>
</div>​

---

以下是工作版本：

你的意思是类似于

我基本上使用@Flek的例子。
唯一的区别是

ng model='title'

进行双向绑定的诀窍是ng模型，它在

ngModel是指示Angular进行双向数据绑定的指令。 它与输入、选择、文本区域一起工作。你写起来很容易 您自己的指令也可以使用ngModel

---

下面是一种在指令中传递回调参数的方法。控制器模板：

    <component-paging-select-directive
            page-item-limit="{{pageItemLimit}}"
            page-change-handler="pageChangeHandler(paramPulledOutOffThinAir)"
            ></component-paging-select-directive>

在控制器中：

angular.module('...').controller(...
        $scope.pageItemLimit = 0; // initial value for controller scoped var

        // complete the data update by setting the var in controller scope 
        // to the one from the directive
        $scope.pageChangeHandler = function(paramPulledOutOffThinAir) {
            $scope.pageItemLimit = paramPulledOutOffThinAir;
        }

---

请注意指令（参数为键的对象）、模板（“指令中参数对象的未包装”键）和控制器定义的函数参数之间的差异。

没有，它仅以一种方式工作（如angular docs的示例中所示）。我想要的是一个双向数据绑定场景-更改$scope值和指令的值更新，更改指令的值和$scope值更新。幸运的提示-angularJS团队的Brian Ford在这里回答了这个问题：@TiagoRoldão maxisam是对的，我刚刚更新了我的帖子和JSFIDDLE很棒！关键词“title”令人困惑。。您能否将您的小提琴重命名“title”更新为类似“innerTitle”的名称，以便内部变量和外部变量（在指令中）之间的绑定清晰？您说得对，谢谢！）我更新了我的帖子并加入了正确的JSFIDLE！我只是好奇，我知道你最终不需要手动调用$apply，但为什么要绑定

blur

和

change

？这不是多余的吗？如果没有，我很想知道仅仅使用

keyup-blur

blur

和

change

有什么区别，但我相信从实用角度来看，

keyup

和

change

在功能上是相似的。唯一的区别是，如果我以编程方式更改输入的值，使用

change

将触发一个事件（输入的数据更改），而不使用

change

将使这样的更改不可见，除非它来自击键。请记住，这是“很久”以前的事了，我不知道我在对这头可怕的野兽angularJS做什么；）

function Ctrl3($scope) {
  $scope.title = 'Lorem Ipsum';
}

angular.module('zippyModule', [])
  .directive('zippy', function(){
    return {
      restrict: 'C',
      replace: true,
      transclude: true,
      scope: { title:'=zippyTitle' },
      template: '<input type="text" value="{{title}}"style="width: 90%"/>',
      link: function(scope, element, attrs) {
        // Your controller
      }
    }
  });

<input type="text" ng-model="title" style="width: 90%"/>

<input type="text" ng-model="title" style="width: 90%"/>

    <component-paging-select-directive
            page-item-limit="{{pageItemLimit}}"
            page-change-handler="pageChangeHandler(paramPulledOutOffThinAir)"
            ></component-paging-select-directive>

angular.module('component')
    .directive('componentPagingSelectDirective', [
        function( ) {
            return {
                restrict: 'E',
                scope: { 
                    // using the '=' for two way doesn't work
                    pageItemLimit:  '@', // the '@' is one way from controller
                    pageChangeHandler: '&'
                },
                controller: function($scope) {   
                    // pass value from this scope to controller method. 
                    // controller method will update the var in controller scope
                    $scope.pageChangeHandler({
                        paramPulledOutOffThinAir: $scope.pageItemLimit
                    })

                }, ...

angular.module('...').controller(...
        $scope.pageItemLimit = 0; // initial value for controller scoped var

        // complete the data update by setting the var in controller scope 
        // to the one from the directive
        $scope.pageChangeHandler = function(paramPulledOutOffThinAir) {
            $scope.pageItemLimit = paramPulledOutOffThinAir;
        }