Question

所以我有一些html会根据用户所在的questionNumber动态加载到#panel div中。这不是所有代码，而是我认为的所有相关代码。无论如何，<input> get被加载到页面中但实际上并没有做任何事情。我在这里想念的是什么？当questionNumber === 1时，我遇到同样的问题，其中绑定变量只显示为{{variable}}等

var readingController = function (scope, Romanize){
        scope.usersRomanization;
        //alert(scope.usersRomanization);
}

var app = angular.module('Tutorials', ['functions', 'tutorials']).controller('getAnswers', function ($scope, $element, Position, Romanize) {
$scope.sectionNumber = Position.sectionNumber;
if ($scope.sectionNumber === 0){
    $('#panel').html('<div ng-controller="readingController"><input ng-model="usersRomanization"></input></div>');
    readingController($scope, Romanize);
}

<body ng-controller="getAnswers">
    <div  id="panel">
    </div>
</body>

Answer 1

如果你向DOM添加HTML，你必须告诉Angular $ compile。这应该在指令中完成。您需要注入$compile，然后执行以下操作：

var content = '<div ng-controller=...></div>';
var compiled = $compile(content)(scope);
// then put the content where you want

或者更好的是，定义一个指令并使用template，它将自动由Angular为您编译。

其他替代方案是ng-include（将为您编译加载的内容）和ng-switch，这将允许您将模板放入HTML中。

动态加载的输入框什么都不做

1 个答案: