AngularJS中自定义指令中的双向绑定

时间:2014-08-28 16:38:41

标签: angularjs angularjs-directive

我正在尝试在angularJs中为自定义指令实现双向绑定。不知道它不起作用。

html文件

<div ng-app='myApp'>Outside directive
  <input type='text' ng-model='outAttr'>{{outAttr}}</br>
  <div my-directive some-attr='outAttr'></div>
</div>

js file

var myApp = angular.module('myApp', []);

myApp.directive('myDirective', function () {
  return {
      restrict: 'A,
      replace: true,
      scope: {
        inAttr: '=someAttr';
      },
      template: "<div><input type='text' ng-model='inAttr'>\
                {{inAttr}}</div>"
     }
})

不知怎的,它不起作用。这是JSFiddle link。有人可以帮助我指出我的错误。感谢。

1 个答案:

答案 0 :(得分:1)

语法错误很少。您的代码逻辑正常 - jsFiddle

var myApp = angular.module('myApp', []);

myApp.directive('myDirective', function() {
    return {
        restrict: 'A', // missing '
        replace: true,
        scope: {
            inAttr: '=someAttr' // no ;
        },
        template: '<div><input type="text" ng-model="inAttr">{{inAttr}}</div>' // no break
    };
});