Question

我有一个指令，根据服务器发送的配置呈现输入。除了选择＆＃39;之外，一切都很好。输入。无论我尝试什么，ng-model都不会更新。我已经修剪了很多代码以解决问题：

Javascript：

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

    myApp.factory('DynamicData', [function() {
         return {
            data: {
              backup_frequency: 604800
            }
        };

    }])
    .directive('dynamicInput',
        ['$compile', 'DynamicData', function($compile, DynamicData) {

            /**
             * Render the input
            */
            var render = function render() {
                var input = angular.element('<select class="form-control" ng-model="inner.backup_frequency" ng-options="option.value as option.title for option in options"></select>');
                return input;
            };

            var getInput = function ()
            {
                var input = render();
                return input  ? input[0].outerHTML : '';
            };

            var getTemplate = function(){

                var template = '<div class="form-group">' +
                                'Select input ' +
                                '<div class="col-md-7">' + getInput() + '</div>' +
                            '</div>';
                return template;
            }; 

            return {
                restrict : 'E',
                scope: {
                    content:'=content',
                },

                link : function(scope, element, attrs) {
                    var template = getTemplate();

                    scope.options = [
                      {title: "Daily", value: 86400},
                      {title: "Weekly", value: 604800},
                      {title: "Monthly", value: 2678400},
                      ];
                    scope.inner = DynamicData.data;
                    console.info('inner data', scope.inner);

                    element.html(template);
                    element.replaceWith($compile(element.contents())(scope));


                }
            };
      }])
      .controller('FormCtrl', ['DynamicData', '$scope', function (DynamicData, $scope){
        $scope.app = {};

        $scope.save = function save() {
          $scope.value = DynamicData.data.backup_frequency;
          console.info('DynamicData', DynamicData.data);
        };
      }]);

HTML：

  <head>
    <script data-require="angular.js@1.3.8" data-semver="1.3.8" src="https://code.angularjs.org/1.3.8/angular.js"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Dynamic Input :</h1>
    <div data-ng-controller="FormCtrl">
      <dynamic-input class="form-group" content="app"></dynamic-input>
      <span data-ng-bind="value"></span><br/>
      <button class="btn btn-primary" ng-click="save()">Save</button>
    </div>
  </body>

</html>

可以使用工作的掠夺者：http://plnkr.co/edit/mNBTJzZXjX6mLyPz6NCI?p=preview

您是否有任何想法为什么选择中的ng模型没有更新？

编辑：我想要实现的是更新变量＆＃34; inner.backup_frequency＆＃34; （对我的工厂DynamicData返回的数据对象的引用）。正如您在plunker中看到的，每当我更改select中的选项时，ng-model中包含的变量都不会更新。

感谢您的时间。

Answer 1

我已经修好了。你需要做的不是用编译的内容替换元素的内容，而是用原始HTML替换它，然后再用编译它。

element.html(template);
$compile(element.contents())(scope);

Working Plunker

编辑：我已编辑您的代码，无需使用该指令：

Plunker without directive

编辑2 ：也是一个与指令一起使用的版本，但没有编译：

Plunker

ngModel未在select中更新

1 个答案: