Question

我正在开发一个AngularJS应用程序。我正在尝试编写一个可重用的组件，以便在整个应用程序中使用。为了演示，我们只使用一个文本框。我创造了我attempt here的小提琴。基本上，我试图使用这样的控件：

<div ng-app="myApp">
  <div ng-controller="myController">
      <my-control textValue="{{controlValue}}"></my-control>
      <br />
      You entered: {{controlValue}}
  </div>
</div>

不幸的是，我无法弄清楚如何绑定控制器范围和指令范围之间的属性。我不确定我在my fiddle做错了什么。有人可以告诉我我做错了吗？

谢谢！

Answer 1

您已创建具有隔离范围的指令，并且您正尝试从隔离范围打印值。这是不对的，你可以像这样编写你的指令，而没有孤立的scope：

 return {
      restrict: 'EAC',

        template: '<input type="text" ng-model="controlValue"></input>'
    };

如果你想设置具有隔离范围的指令，你应该隔离你的范围然后使用$ watch进行更改

Answer 2

你不是那么远，但在使用{{}}

时需要小心

删除大括号，不要对文本值属性使用驼峰表示法：

<div ng-app="myApp">
  <div ng-controller="myController">
      <my-control text-value="controlValue"></my-control>
      <br />
      You entered: {{controlValue}}
  </div>
</div>

使用ng-model属性：

angular.module('ui.directives', []).directive('myControl',
  function() {
    return {
      restrict: 'EAC',

      scope: {
          textValue: '='
      },
        template: '<input type="text" ng-model="textValue"></input>'
    };
  }
);

将AngularJS指令属性值公开给父控制器

2 个答案: