我有两个Angular控制器:
function Ctrl1($scope) {
$scope.prop1 = "First";
}
function Ctrl2($scope) {
$scope.prop2 = "Second";
$scope.both = Ctrl1.prop1 + $scope.prop2; //This is what I would like to do ideally
}
我不能Ctrl1在里面使用,Ctrl2因为它是未定义的.但是,如果我尝试传递它...
function Ctrl2($scope, Ctrl1) {
$scope.prop2 = "Second";
$scope.both = Ctrl1.prop1 + $scope.prop2; //This is what I would like to do ideally
}
我收到一个错误.有谁知道如何做到这一点？
干
Ctrl2.prototype = new Ctrl1();
也失败了.
注意:这些控制器不是彼此嵌套的.
当我尝试在ng-click上更新我的数组时,为了更新我的ng-repeat的指令项:
<li ng-repeat="itemL1 in mainMenuL1Arr"
ng-click="selectL2menu(itemL1.name)">
<i ng-class="getClass(itemL1.icon)"></i>
</li>
selectL2menu()在控制器上定义为:
$scope.selectL2menu = function selectL2menu(itemL1name){
$scope.$apply(function () {
$scope.mainMenuL2CurArr = $scope.mainMenuL2Obj[itemL1name];
});
}
在点击第一级菜单项后,它应该显示具有相应元素的第二级菜单块(通过使用相应的值更新数组,见下文).这是我需要在点击时更新的第二级菜单块:
<li ng-repeat="itemL2 in mainMenuL2CurArr"
class="subMenuElemBlock"
ng-class="{active: itemL2.selected}">
<a href="#">
<i ng-class="getClass(itemL2.icon)"></i>
<span>{{itemL2.name}}</span>
</a>
</li>
触发click事件时 - 我的阵列已成功更新.然而ng-repeat指令没有更新我的第二级菜单(基于更新数组).我试过(和没有)使用$ apply函数 - 相同的结果(虽然使用$ apply错误消息出现错误:$ apply已在进行中).
那么,为什么我的数组成功更新点击未在ng-repeat指令菜单元素上显示？
如果使用路由和控制器,那么模型不会在控制器重新加载之间保存其状态.Angular在每个路由负载上创建控制器实例和新范围.
例如,我在输入中输入一些具有ng-model ="something"的东西,转到另一条路线,然后返回第一条路线.我输入的所有文字都丢失了.
我需要在路由更改之间进行简单的双向数据绑定.尽可能简单,比如knockoutjs中的ko.observable.或隐含地像在一个控制器内的角度.也许使用singleton $ scope作为控制器？
当我创建服务以在路由更改之间保存数据并将其注入控制器时,我找到了方法.在控制器的构造函数中,我使用service中的值创建模型,并使用$ scope.watch将此模型用于更改,并在更改时将模型的值设置为service.
有没有更简单的方法？
所以我有这种情况，我有两种观点。一个视图从用户那里获取多个输入，第二个视图显示执行一些计算后的输入结果。由于两个视图都属于不同的 div，我必须分别为它们定义相同的 ng-controller。
现在的问题是输入视图中的更改没有反映在输出视图中。
var app = angular.module("app", []);
app.controller('controller',function ($scope) {
$scope.val1 = 10;
$scope.val2 = 0;
$scope.val3 = 0;
$scope.val4 = 0;
$scope.cal = function() {
return parseInt($scope.val1) + parseInt($scope.val2) + parseInt($scope.val3) + parseInt($scope.val4);
}
});<!DOCTYPE html>
<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app">
<form action="#" ng-controller="controller">
<input type="text" ng-model="val1"><br>
<input type="text" ng-model="val2"><br>
<input type="text" ng-model="val3"><br>
<input type="text" ng-model="val4"><br>
Self:{{cal()}}
</form>
<div ng-controller="controller">
Other:{{cal()}}
</div>
</body>
</html>现在我可以通过将所有 val1、val2、val3 和 val4 输入重新定义为隐藏在输出视图中来使其工作，但这是一个带有冗余代码的丑陋解决方案。什么是正确的做法。 …