父控制器设置为 ' parentCtrl as vm ' 和 chield 设置为 ' childCtrl as vmc ' 没有名称冲突,它运行良好。
如何在子控制器中访问父控制器?
请注意,'$scope.$parent' 不起作用。
我很难理解这个错误...我不太明白为什么它不是一个函数....
angular.module('mkApp').factory('mkService', function ($http, $log) {
function getLookUp(successcb) {
$http = ({
method: 'GET',
url: 'api/Entries/'
}).success(function (data, status, header, config) {
successcb(data);
}).
error(function (data, status, header, config) {
$log, warn(data, status, header, config);
});
};
return {
lookUp: getLookUp
}
});
angular.module('mkApp').controller('mkControler', function ($scope, mkService) {
mkService.lookUp(function (data) {
$scope.ddl = data;
console.log(ddl);
});
});
Run Code Online (Sandbox Code Playgroud)
这是我的HTML
<div ng-app="mkApp">
<div ng-controller="mkControler">
<table>
<tr>
<td> First Name</td>
<td> Last Name</td>
</tr>
<tr>
<td><input type="text" /></td>
<td><input type="text" /></td>
</tr>
<tr> …Run Code Online (Sandbox Code Playgroud) javascript angularjs angularjs-scope angularjs-controller angularjs-http
当我通过具有指令的字符串生成新元素(这就是我需要编译的原因)并且该指令通过"="生成与控制器范围中的变量的关联时,我的控制器中的变量不与一个在指令中.
我创建了一个jsfiddle来显示"门"ng模型值应该与所有指令模型值相关联的示例.
看到这个小提琴:http://jsfiddle.net/aVJqU/2/
我注意到的另一件事是,从html中存在的元素运行的指令通过变量(控制器和指令)显示正确的关联.
html(有绑定的指令<door>):
<body ng-app="animateApp">
<div ng-controller="tst">
<h2> Controller with its model </h2>
<input ng-model="doorval" type="text"> </input>
{{doorval}}
<h2> Directive render directly from the html </h2>
<door doorvalue="doorval"></door> <key></key>
<h2> Directives that are compiled </h2>
<list-actions actions="actions"></list-actions>
</div>
</body>
Run Code Online (Sandbox Code Playgroud)
这是指令:
animateAppModule.directive('door', function () {
return {
restrict: "E",
scope: {
doorvalue:"="
},
template: '<span>Open the door <input type="text" ng-model="doorvalue"> </input> {{doorvalue}}</span>',
replace: true
}
})
Run Code Online (Sandbox Code Playgroud)
这是控制器:
var animateAppModule = angular.module('animateApp', [])
animateAppModule.controller('tst', function …Run Code Online (Sandbox Code Playgroud) javascript angularjs angularjs-directive angularjs-scope angularjs-controller
我使用AngularJS创建了两个下拉列表,并通过控制器在其中附加了数据.我想在第一次下拉时发生更改时更改第二个下拉值.
我创建了这个例子,但是当我改变第一个下拉的值时; 第二个下拉值不会改变.
我有一个通过REST检索数据的服务.我想将结果数据存储在服务级别变量中,以便在多个控制器中使用.当我将所有REST逻辑直接放入控制器时,一切正常,但是当我尝试将数据的检索/存储移动到服务中时,控制器在数据恢复时不会被更新.我已经尝试了很多不同的方法来维护服务和控制器之间的绑定.
控制器:
myApp.controller('SiteConfigCtrl', ['$scope', '$rootScope', '$route', 'SiteConfigService',
function ($scope, $rootScope, $route, SiteConfigService) {
$scope.init = function() {
console.log("SiteConfigCtrl init");
$scope.site = SiteConfigService.getConfig();
}
}
]);
Run Code Online (Sandbox Code Playgroud)
服务:
myApp.factory('SiteConfigService', ['$http', '$rootScope', '$timeout', 'RESTService',
function ($http, $rootScope, $timeout, RESTService) {
var siteConfig = {} ;
RESTService.get("https://domain/incentiveconfig", function(data) {
siteConfig = data;
});
return {
getConfig:function () {
console.debug("SiteConfigService getConfig:");
console.debug(siteConfig);
return siteConfig;
}
};
}
]);
Run Code Online (Sandbox Code Playgroud)
视图:
<div class="span4" ng-controller="SiteConfigCtrl">
<header>
<h2>
{{site.title}}
</h2>
</header>
Run Code Online (Sandbox Code Playgroud) 我有一些工厂:
.factory("someFactory", function() {
var someFactory = {};
someFactory.objects = [
{ name: "obj1" },
{ name: "obj2" }
];
return someFactory;
}
Run Code Online (Sandbox Code Playgroud)
还有一些控制器,它监视这个工厂对象名称的变化:
.controller("someController", ["someFactory", "$scope", function($scope, someFactory) {
for (var i = someFactory.values.length - 1; i >= 0; i--) {
$scope.$watch("someFactory.values[" + i + "].name", function(newVal, oldVal, scope) {
if(newVal !== undefined) {
// do something
}
});
}]);
Run Code Online (Sandbox Code Playgroud)
我很惊讶这实际上是有效的,我不必单独为我工厂中的每个对象编写代码.我想我很惊讶,因为我对$ scope的实际缺乏了解.如果有人问我,我会告诉他这就像是观察者的好模式.这是一个合适的解释吗?
angularjs angularjs-service angularjs-scope angularjs-controller
我的应用程序中有多个控制器,其中有一些重复的代码,例如:
$scope.alert = null;
$scope.addAlert = function (message) {
$scope.alert = { type: 'danger', msg: message };
};
$scope.clearAlerts = function () {
$scope.alert = null;
};
Run Code Online (Sandbox Code Playgroud)
在AngularJS中共享这些范围函数和变量的推荐方式是什么?使用控制器继承?
javascript angularjs angularjs-service angularjs-scope angularjs-controller
我有(以下)html:
<div ng-controller="MyController">
<my-sub-directive></my-sub-directive>
</div>
Run Code Online (Sandbox Code Playgroud)
控制器的外观并不重要:
app.controller("MyController", function($scope) {
$scope.foo = "bar";
})
Run Code Online (Sandbox Code Playgroud)
我的指令看起来像这样:
function mySubDirective() {
return {
restrict: "E",
templateUrl:"aTemplate.html",
require: "^MyController",
link: function($scope, element) {
}
};
}
app.directive("mySubDirective", mySubDirective);
Run Code Online (Sandbox Code Playgroud)
在文档中,他们总是在require-property中指定另一个指令,但它表示这意味着你需要控制器.所以我想尝试这个解决方案.但是我得到了错误
"无法找到指令'mySubDirective'所需的控制器'MyController'".
如果由ng-controller设置,是否不能要求指令中的控制器?
我有一个简单的控制器(logincontroller),在加载login.html时会启动两次,但我不知道为什么会这样.
MyApp.js:
angular.module('PVM', [
'Authentication',
'Modal',
'ngRoute'
])
.config([
'$routeProvider', function($routeProvider) {
$routeProvider
.when('/Login', {
controller: 'LoginController',
templateUrl: 'Login.html'
})
.when('/Home', {
controller: 'ModalController',
templateUrl: 'Home.html'
})
.otherwise({
redirectTo: '/Login'
});
}
]);
Run Code Online (Sandbox Code Playgroud)
LoginController.js:
angular.module("Authentication")
.controller("LoginController",
[
"$scope", "$rootScope", "$location", "AuthenticationService",
function($scope, $rootScope, $location, AuthenticationService) {
AuthenticationService.ClearCredentials();
$scope.login = function() {
var foo = "bar"; //Breakpoint hits here twice when loading login.html
};
}
]);
Run Code Online (Sandbox Code Playgroud)
index.html的:
<!DOCTYPE html>
<html ng-app="PVM">
<head>
<title>My Ang</title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.min.css" rel="stylesheet" …Run Code Online (Sandbox Code Playgroud) 我想使用函数更改ng-repeat循环中项目的值.
例如这不起作用.
HTML
<ul class="unstyled">
<li ng-repeat="todo in todoList.todos">
<span>{{todo.name}}</span>
<button ng-click="example(todo)">Change me</button>
</li>
</ul>
Run Code Online (Sandbox Code Playgroud)
JS
$scope.example = function(v) {
v.name = 'i am different now';
};
Run Code Online (Sandbox Code Playgroud)
完整的例子
javascript angularjs angularjs-controller angularjs-controlleras