Question

我试图创建一个使用另一个指令的指令。

主指令，分别编辑一个字符串来编辑每个项目。

问题是主要指令并没有从内部指令中接收ng模型的变化。

使用以下示例：

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.min.js"></script>
  </head>
  <body ng-app="app" ng-controller="Ctrl">
    <input type="text" ng-model="values">
    <editors model="values">

    <script>
        var app = angular.module('app', ['ui.bootstrap']);
        app.controller('Ctrl', ['$scope', function($scope) {
            $scope.values = '1 2';
        }]);

        app.directive('editors', function() {
            return {
                restrict: 'E',
                template: '<accordion><accordion-group heading="Editor 1 - {{field1}}"><editor model="field1"></accordion-group><accordion-group heading="Editor 2 - {{field2}}"><editor model="field2"></accordion-group>',
                scope: {
                    model: '=model'
                },
                controller: ['$scope', function($scope) {
                    $scope.$watch('model', function() {
                        var values = $scope.model.split(' ');
                        $scope.field1 = values[0];
                        $scope.field2 = values[1];

                        $('body').append($scope.field1 + ' - ');
                        $('body').append($scope.field2+ '<br>');
                    });
                }]
            };
        });

        app.directive('editor', function() {
            return {
                restrict: 'E',
                template: '<input type="text" ng-model="model"> {{model}}',
                scope: {
                    model: '=model'
                }
            };
        });
    </script>
  </body>
</html>

图片1 - 更改field1（编辑器1）中的值不会影响手风琴的标题。

Iamge 2 - 更改根值（在手风琴外输入）会更新字段（field1和field2）和手风琴标题。

Image 1 and 2

当我更改编辑器1值以更新手风琴标题时，我怎样才能使它工作？

Answer 1

永远不会经常使用前缀＆＃34; ng＆＃34;在你自己的自定义指令!!!!

ng-model是由angular开发和维护的指令。它将创建自己的范围。

它应该接收一个字符串，而不是别的。

以这种方式绑定它：

            scope: {
                model: '=model'
            },

指令内部指令和ngModel

1 个答案: