Javascript ngModel未在select中更新_Javascript_Angularjs

Javascript ngModel未在select中更新

javascript angularjs

Javascript ngModel未在select中更新,javascript,angularjs,Javascript,Angularjs,我有一个基于服务器发送的配置呈现输入的指令。除了“选择”输入外，一切都很正常。无论我尝试什么，ng模型都不会更新。我对代码进行了大量的裁剪，以隔离问题： <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="s

我有一个基于服务器发送的配置呈现输入的指令。除了“选择”输入外，一切都很正常。无论我尝试什么，ng模型都不会更新。我对代码进行了大量的裁剪，以隔离问题：

  <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>

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);
        };
      }]);

  <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>

var myApp=angular.module（'example'，[]）；
myApp.factory（'dynamicATA'，[function（）{
返回{
数据：{
备份频率：604800
}
};
}])
.directive（'dynamicput'，
['$compile'，'dynamicata'，函数（$compile，dynamicata）{
/**
*呈现输入
*/
var render=函数render（）{
变量输入=角度元素（“”）；
返回输入；
};
var getInput=函数（）
{
var输入=render（）；
返回输入？输入[0]。outerHTML:“”；
};
var getTemplate=function（）{
变量模板=“”+
“选择输入”+
“”+getInput（）+“”+
'';
返回模板；
}; 
返回{
限制：'E'，
范围：{
内容：'=内容'，
},
链接：函数（范围、元素、属性）{
var template=getTemplate（）；
scope.options=[
{标题：“每日”，价值：86400}，
{标题：“每周”，价值：604800}，
{标题：“每月”，价值：2678400}，
];
scope.inner=DynamicData.data；
console.info（'internaldata'，scope.internal）；
html（模板）；
replaceWith（$compile（element.contents（））（scope））；
}
};
}])
.controller（'FormCtrl'，['dynamicata'，'$scope'，函数（dynamicata，$scope）{
$scope.app={}；
$scope.save=函数save（）{
$scope.value=dynamicata.data.backup\u频率；
console.info（'dynamicata'，dynamicata.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>


动态输入：


拯救

可使用工作的活塞：

  <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>

你知道为什么select中的ng模型没有更新吗

  <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>

编辑：我想要实现的是更新变量“inner.backup\u frequency”（我的工厂DynamicData返回的对我的数据对象的引用）。正如您在plunker中看到的，每当我更改select中的选项时，ng模型中包含的变量都不会更新

  <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>

谢谢您抽出时间。

我已经修好了。您需要做的不是用编译的内容替换元素的内容，而是用原始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>

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

  <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>

编辑：我编辑了您的代码，使其在没有指令的情况下工作：

  <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>

  <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>

编辑2：也是一个版本，它与指令一起工作，但没有编译：

  <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>

我有一个类似的问题，发现如果您直接将ng模型绑定到下面的范围变量，那么范围变量选择将不会以某种方式更新

  <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>

<select ng-model="selection" ng-options="option for option in options">

您是否希望我每次单击时，

都不一样。。或选择选项中的值有效。。请解释您好，您是否尝试在select上获取on change事件，并在javascript中设置$scope.varaible，而不是$scope.$apply（），只是想看看它是否与$digest循环之外的元素有关？请参阅有关编译顺序和dom中的放置顺序。您好，谢谢您的回答，它可以工作。然而，我真的很想减轻我的DOM并删除“DynamicInput”HTML标记。有什么想法吗？@AlexandreNucera是的，看起来该指令所做的只是生成硬编码的HTML，为什么不直接使用它并失去编译功能，等等？好吧，这似乎做到了：var e=$compile（template）（scope）；元素。替换为（e）；（我明天会给你奖金，我要等21小时）@AlexandreNucera我也更新了我的答案，我加入了一个新的plunker，在没有指令的情况下做同样的事情。如果有帮助的话：）我需要指令，我只是不希望它出现在DOM中。谢谢你的帮助！对我有很大帮助的外卖：•模型需要是范围变量的属性-而不是范围变量•最好不要在JS中分配范围变量的属性-只要在HTML中引用它，angular就会创建并更新它只要记住：“范围不是模型，范围指的是模型”和“当你有ng模型的时候，一定有一个点在那里。如果你没有一个点，你就做错了。”