我仔细阅读了关于该主题的AngularJS文档,然后使用指令进行了调整.这是小提琴.
以下是一些相关的片段:
来自HTML:
<pane bi-title="title" title="{{title}}">{{text}}</pane>
从窗格指令:
scope: { biTitle: '=', title: '@', bar: '=' },
我有几件事没有得到:
"{{title}}"与'@'和"title"使用'='？我找到了另一个显示表达式解决方案的小提琴:http://jsfiddle.net/maxisam/QrCXh/
angularjs angularjs-directive angularjs-scope isolated-scope
我正在寻找任何方式访问指令中的"父"范围.范围,转换,要求的任何组合,从上面传递变量(或范围本身)等.我完全愿意向后弯腰,但我想避免一些完全hacky或不可维护的东西.例如,我知道我现在可以通过$scope从preLink参数中获取并迭代它的$sibling范围来找到概念性的"父".
我真正想要的是能够$watch在父范围内表达.如果我能做到这一点,那么我可以完成我在这里要做的事情:
AngularJS - 如何使用变量渲染部分？
重要的一点是,该指令必须可以在同一父范围内重复使用.因此默认行为(范围:false)对我不起作用.我需要每个指令实例的单独范围,然后我需要$watch一个存在于父范围内的变量.
代码示例值1000个单词,因此:
app.directive('watchingMyParentScope', function() {
return {
require: /* ? */,
scope: /* ? */,
transclude: /* ? */,
controller: /* ? */,
compile: function(el,attr,trans) {
// Can I get the $parent from the transclusion function somehow?
return {
pre: function($s, $e, $a, parentControl) {
// Can I get the $parent from the parent controller?
// By setting this.$scope = $scope from within that controller?
// …可能是愚蠢的问题,但我的html表单有简单的输入和按钮:
<input type="text" ng-model="searchText" />
<button ng-click="check()">Check!</button>
{{ searchText }}
然后在控制器中(从routeProvider调用模板和控制器):
$scope.check = function () {
console.log($scope.searchText);
}
为什么我在单击按钮时看到视图更新正确但在控制台中未定义？
谢谢!
更新:似乎我已经解决了这个问题(之前不得不提出一些解决方法):只需要将我的属性名称更改searchText为search.text,然后$scope.search = {};在控制器中定义空对象并瞧...不知道为什么它正在工作虽然;]
我有这个模块路线:
var mainModule = angular.module('lpConnect', []).
config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/home', {template:'views/home.html', controller:HomeCtrl}).
when('/admin', {template:'views/admin.html', controller:AdminCtrl}).
otherwise({redirectTo:'/connect'});
}]);
主页HTML:
<div ng-include src="views.partial1"></div>
partial1 HTML:
<form ng-submit="addLine()">
<input type="text" ng-model="lineText" size="30" placeholder="Type your message here">
</form>
HomeCtrl:
function HomeCtrl($scope, $location, $window, $http, Common) {
...
$scope.views = {
partial1:"views/partial1.html"
};
$scope.addLine = function () {
$scope.chat.addLine($scope.lineText);
$scope.lines.push({text:$scope.lineText});
$scope.lineText = "";
};
...
}
在addLine函数$scope.lineText中undefined,这可以通过添加ng-controller="HomeCtrl"来解决partial1.html,但是它会导致控制器被调用两次.我在这里错过了什么？
html javascript angularjs angularjs-scope angularjs-ng-include
在AngularJS的负责人Igor Minar 的这篇文章的背景下:
MVC vs MVVM vs MVP.许多开发人员可以花费数小时和数小时进行辩论和争论,这是一个多么有争议的话题.
多年来,AngularJS更接近MVC(或者更确切地说是其客户端变体之一),但随着时间的推移,由于许多重构和api改进,它现在更接近MVVM - $ scope对象可以被认为是正在进行的ViewModel由我们称之为Controller的函数装饰.
能够对框架进行分类并将其放入MV*桶之一具有一些优势.它可以帮助开发人员更轻松地使用它的apis,从而更容易创建一个表示使用框架构建的应用程序的心理模型.它还可以帮助建立开发人员使用的术语.
话虽如此,我宁愿看到开发人员构建精心设计的kick-ass应用程序并遵循关注点分离,而不是看到他们浪费时间争论MV*废话.因此,我在此声明 AngularJS是MVW框架 - 模型 - 视图 - 随便.无论什么代表" 对你有用的东西 ".
Angular为您提供了很大的灵活性,可以很好地将表示逻辑与业务逻辑和表示状态分开.请使用它来提高您的生产力和应用程序的可维护性,而不是热烈讨论那些在一天结束时无关紧要的事情.
在客户端应用程序中是否有任何关于实现AngularJS MVW(Model-View-Whatever)设计模式的建议或指南？
javascript architecture design-patterns client-side angularjs
我试图允许用户使用ngRepeat和编辑项目列表ngModel.(看到这个小提琴.)但是,我尝试过的两种方法都会导致奇怪的行为:一个不更新模型,另一个模糊每个keydown上的形式.
我在这里做错了吗？这不是支持的用例吗？
以下是小提琴的代码,为方便起见而复制:
<html ng-app>
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body ng-init="names = ['Sam', 'Harry', 'Sally']">
<h1>Fun with Fields and ngModel</h1>
<p>names: {{names}}</p>
<h3>Binding to each element directly:</h3>
<div ng-repeat="name in names">
Value: {{name}}
<input ng-model="name">
</div>
<p class="muted">The binding does not appear to be working: the value in the model is not changed.</p>
<h3>Indexing into the array:</h3>
<div ng-repeat="name in names">
Value: {{names[$index]}}
<input ng-model="names[$index]">
</div>
<p class="muted">Type one character, and the input …我有两个控制器,一个包裹在另一个.现在我知道子范围从父范围继承属性,但有没有办法更新父范围变量？到目前为止,我没有遇到任何明显的解决方案.
在我的情况下,我在表单中有一个日历控制器.我想从父作用域(即表单)更新开始日期和结束日期,以便表单在提交时具有开始日期和结束日期.
我在.html页面中有一个下拉列表,
落下:
<select ng-model="blisterPackTemplateSelected" data-ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates">
<option value="">Select Account</option>
</select>
我想在用户选择值时执行操作.所以在我的控制器中我做到了:
控制器:
$scope.$watch('blisterPackTemplateSelected', function() {
alert('changed');
console.log($scope.blisterPackTemplateSelected);
});
但是更改下拉列表中的值不会触发代码: $scope.$watch('blisterPackTemplateSelected', function()
结果,我ng_change = 'changedValue()'在select标签上尝试了另一种方法:
和
功能:
$scope.changedValue = function() {
console.log($scope.blisterPackTemplateSelected);
}
但是blisterPackTemplateSelected存储在子范围内.我读到父母无法访问子范围.
当下拉列表中的选定值发生变化时,执行某些操作的正确/最佳方法是什么？如果它是方法1,我的代码怎么办？
如果我有以下控制器:
function parent($scope, service) {
$scope.a = 'foo';
$scope.save = function() {
service.save({
a: $scope.a,
b: $scope.b
});
}
}
function child($scope) {
$scope.b = 'bar';
}
什么是让你parent读b出来的正确方法child？如果有必要定义b中parent,也不会使它语义上不正确假设b是描述相关的东西的属性child,而不是parent？
更新:进一步思考它,如果有一个以上的孩子b,它将产生一个冲突parent,b以便检索.我的问题是,什么是访问的正确方法是b从parent？