3

我创建了一个自定义指令，其中有一个需要在其他视图中使用的数组。例如，假设我的指令内容中有一个输入框，我必须在另一个控制器中使用它的值，我该如何实现？我尝试使用 ng-model 但没有成功。

这是我的控制器：

angular.module("demo", []);

angular.module("demo").controller("demoController", function ($scope) {
    $scope.name = "John";
});

angular.module("demo").controller("directiveController", function ($scope) {

    $scope.name = "John Doe";

});


angular.module("demo").directive("passVariable", function () {
    return {
        restrict: 'AEC',
        require: "ngModel",
        templateUrl: "content.html",
        link: function (scope, element, attr, ngModel) {
            scope.$watch(function () {
                return ngModel.$modelValue;
            },
            function (modelValue) {
                console.log(modelValue);       
            });

        }
    }
});

和 HTML 文件：

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.4.0-beta.5" data-semver="1.4.0-beta.5" src="https://code.angularjs.org/1.4.0-beta.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
  </head>

  <body ng-app="demo" ng-controller="demoController">
    <div>
      <pass-variable ng-model="name"></pass-variable>
    </div>
    <br />
    <div>
        Second directive textbox:       <input type="text" ng-model="name" pass-variable="" />
    </div>
    <br />
    <div>
        Main textbox:       <input type="text" ng-model="name" />
    </div>
  </body>

</html>

和 content.html

<div ng-controller="directiveController">
    Content Textbox: <input type="text" ng-model="name"/>
</div>

这是我的 plunker：http ://embed.plnkr.co/rzlUQM6FBI3Sll4F8WaG/preview

顺便说一句，我不知道为什么 plunker 不加载 content.html

更新我发现我应该在指令中添加控制器controller: directiveController并删除ng-controller='directiveController'incontent.html

4

2 回答 2

1

如果我理解正确，您的问题出在 content.html 中的 ng-controller 上。

<div ng-controller="directiveController">
  Content Textbox: <input type="text" ng-model="name"/>
</div>

删除 ng-controller 后，所有三个输入字段都将同步。

它不起作用的原因是您在指令模板中定义了一个新控制器，它有一个 $scope.name 属性，它隐藏了原始控制器的属性。

这是一个plnkr

于 2015-03-04T11:09:41.293 回答
0

请尝试$parent.name如下

<div ng-controller="directiveController">
    Content Textbox: <input type="text" ng-model="$parent.name"/>
</div>
于 2015-08-12T15:10:07.140 回答