Question

我的简单 angular.js 应用有问题。
的 app.html

<body ng-app="myAct">
    <div class="container">
        <div ng-controller="myCtrl">
            <div ng-include="'form.html'"></div>
        </div>
    </div>
</body>

form.html

<div class="col-sm-12">
<input ng-model="general"    name="general"></input>
<input ng-model="concrete"   name="concrete"></input>
<button type="button" ng-click="addTk()">Add</button>
</div>

的script.js

var app = angular.module('myAct', []);
app.controller('myCtrl', function($scope){
    $scope.arr = [
    ];

    $scope.addTk = function(){
        $scope.arr.push({'general': $scope.general, 'desk': $scope.concrete});
    };
});

它不起作用（value of arr = [general:"null", concrete: "null"]）。但是，当我将 form.html 复制到 app.html 时，它可以正常运行。

Answer 1

它基本上是范围问题，因为ng-include确实使用transclusion创建了新范围，您需要在定义ng-model时遵循点规则，这可以遵循原型继承。

<强>标记

<div>
  <input ng-model="model.general" name="general"></input>
  <input ng-model="model.concrete" name="concrete"></input>
  <button type="button" ng-click="addTk()">Add</button>
</div>

<强>控制器

var app = angular.module('myAct', []);
app.controller('myCtrl', function($scope){
    $scope.model = {}
    $scope.arr = [];

    $scope.addTk = function(){
        $scope.arr.push({'general': $scope.model.general, 'desk': $scope.model.concrete});
    };
});

Answer 2

您遇到的是$scope继承如何工作的结果。

范围从原型上相互继承，在这种情况下ng-include创建一个新范围。这意味着它将从父级继承属性。

这里的重要区别是基元由值继承，而不是通过引用继承。

因此，您的控制器已绑定到它自己的general和concrete属性，但模板和后续ng-model声明绑定到一组子属性不属于父母。

这就是为什么建议您为控制器使用controller as syntax并完全避免使用$scope。

//Properties and methods go directly on controller
app.controller('myCtrl', function(){
    var vm = this;        

    vm.arr = [
    ];

    vm.addTk = function(){
        vm.arr.push({'general': vm.general, 'desk': vm.concrete});
    };
});

<!-- Use ctrl as 'ctrl' -->
<div ng-controller="myCtrl as ctrl">
  <div ng-include="'form.html'"></div>
</div>

<!-- Reference via alias 'ctrl' -->
<input ng-model="ctrl.general" name="general"></input>

通过最少的更改来解决此问题的另一种方法是将ng-controller语句直接移至模板中as mentioned by GPicazo。

Answer 3

@ Pankaj的答案替代方法是将控制器绑定移动到form.html文件中，如下所示：

form.html

<div class="col-sm-12" ng-controller="myCtrl">
    <input ng-model="general"    name="general"></input>
    <input ng-model="concrete"   name="concrete"></input>
    <button type="button" ng-click="addTk()">Add</button>
</div>

Answer 4

您需要在表达式中使用一个点才能保留JavaScript中的引用。最简单的方法是使用controllerAs语法并遵循控制器的prototype类模式。

以下代码将运行：

＆＃13;

var app = angular.module('myAct', []);

function MyCtrl() {
 
    this.arr = [];
  
};

MyCtrl.prototype.addTk = function(data) {
        this.arr.push(data);
};

app.controller('MyCtrl', MyCtrl);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myAct">
    <div class="container">
        <div ng-controller="MyCtrl as vm">
            <div ng-include="'form.html'"></div>
        </div>
    </div>


<script type="text/ng-template" id="form.html">  
<div class="col-sm-12">
  <input ng-model="vm.general" name="general"></input>
  <input ng-model="vm.concrete" name="concrete"></input>
  <button type="button" ng-click="vm.addTk({general: vm.general, concrete: vm.concrete})">Add</button>
  {{vm.arr}}
</div>
</script>

</body>

＆＃13;

Angular.js应用程序在单独的文件中

4 个答案: