Question

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

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

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

更新我已经想出我应该在指令controller: directiveController中添加控制器并删除ng-controller='directiveController'中的content.html

Answer 1

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

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

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

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

这里是plnkr

Answer 2

请尝试$parent.name，如下所示

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

Angularjs Custom指令使用指令控制器变量

2 个答案: