javascript - Angularjs:ng模型无法访问

Question

我在 angularjs 中使用 ng-template

<script type="text/ng-template" id="ng-wig/views/ng-wig.html">
<div class="ng-wig">
........
</div>
<script>

我有一个使用这个 ng-template 的文本区域。

<textarea ng-wig="content" ng-model="contents"></textarea>

但是这个 ng-model 无法在 Controller 内部访问。请帮忙。

Answer 1

当您在 ng-include 中加载 textarea 模板时，如果您查看 ng-include 指令，您会发现它确实创建了一个新范围，即来自父范围的 prototypically inherited 。

如果您使用在 Controller 中声明的任何作用域变量，则在包含 div 内将无法访问该变量。为了让 Controller 变量在 ng-include 中可访问，您必须将其声明为 object，就像 $scope.model= {} 一样，然后您应该声明其中的属性。像 ng-mode="model.contents"

标记

<textarea ng-wig="model.content" ng-model="model.contents"></textarea>

Controller

$scope.model = {};

在这里你可以找到similar answer

<小时/>

除上述之外，还有多种方法可以解决此问题。

另一种方法是，您可以使用 Controller 作为可以避免的方法。因为您需要在 Controller 内使用 this 并使用 Controller 别名，同时在 html 上显示变量，如此处的 vm.contents

马克鲁普

<div ng-controller="myCtrl as vm">
   <div ng-include="'ng-wig/views/ng-wig.html'"></div>
</div>

文本区域

<textarea ng-wig="content" ng-model="vm.contents"></textarea>

<小时/>

您还可以通过在 ng-include 中执行 $parent 来指向 ng-model 的父范围，这只是 Controller 范围，这种情况下您的 ng-model 将是 $parent.contents

文本区域

<textarea ng-wig="$parent.content" ng-model="$parent.contents"></textarea>

注意

Don't use this approach, use the 1st one which is more preferable.