Ale*_*era 8 javascript angularjs
我有一个指令渲染输入基于服务器发送的配置.除了"选择"输入外,一切都很好.无论我尝试什么,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>
有一个工作的plunker:http ://plnkr.co/edit/mNBTJzZXjX6mLyPz6NCI?p=preview
您有什么想法为什么选择中的ng模型没有更新？
编辑:我想要实现的是更新变量"inner.backup_frequency"(我的工厂DynamicData返回的数据对象的引用).正如您在plunker中看到的,每当我更改select中的选项时,ng-model中包含的变量都不会更新.
感谢您的时间.
Yan*_*ang 13
我有一个类似的问题,并发现如果你直接将ng-model绑定到范围变量,如下所示,范围变量选择将以某种方式不会更新.
<select ng-model="selection" ng-options="option for option in options">
相反,在范围中定义视图模型并将ng-model绑定到视图模型,将更新视图模型字段.
<select ng-model="viewmodel.selection" ng-options="option for option in options">
在你的控制器中,你应该这样做:
app.controller('SomeCtrl', ['$scope'
function($scope)
{
$scope.viewmodel = {};
});
我已经修好了。您需要做的不是用编译后的内容替换元素的内容，而是用原始 HTML 替换它，然后再编译它。
element.html(template);
$compile(element.contents())(scope);
工作笨蛋。
编辑：我已经编辑了您的代码以在没有指令的情况下工作：
编辑2：也是一个与指令一起使用的版本，但没有编译：
笨蛋。
| 归档时间： |
|
| 查看次数： |
3038 次 |
| 最近记录： |