我有一个角度指令,初始化如下:
<conversation style="height:300px" type="convo" type-id="{{some_prop}}"></conversation>
我希望它足够聪明,可以在$scope.some_prop更改时刷新指令,因为这意味着它应该显示完全不同的内容.
我已经测试了它,没有任何反应,连接函数甚至在$scope.some_prop更改时都没有被调用.有没有办法让这种情况发生？
如果不在父控制器中使用服务或构建观察者,那么如何让儿童状态访问主控制器$scope.
.state("main", {
controller:'mainController',
url:"/main",
templateUrl: "main_init.html"
})
.state("main.1", {
controller:'mainController',
parent: 'main',
url:"/1",
templateUrl: 'form_1.html'
})
.state("main.2", {
controller:'mainController',
parent: 'main',
url: "/2",
templateUrl: 'form_2.html'
})
我无法在子状态下访问mainController范围 - 或者说我正在获取该范围的另一个实例 - 而不是我想要的.我觉得我错过了一些简单的事情.状态对象中有一个共享数据配置选项,但我不确定是否应将此类用于此类.
我是第一次玩AngularJS,我努力使用ng-include作为我的页眉和页脚.
这是我的树:
myApp
assets
- CSS
- js
- controllers
- vendor
- angular.js
- route.js
......
......
......
main.js
pages
- partials
- structure
header.html
navigation.html
footer.html
index.html
home.html
index.html的:
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>AngularJS Test</title>
<script src="/assets/js/vendor/angular.js"></script>
<script src="/assets/js/vendor/route.js"></script>
<script src="/assets/js/vendor/resource.js"></script>
<script src="/assets/js/main.js"></script>
</head>
<body>
<div ng-include src="partials/structure/header.url"></div>
<div ng-include src="partials/structure/navigation.url"></div>
<div id="view" ng-view></div>
<div ng-include src="partials/structure/footer.url"></div>
</body>
</html>
main.js
var app = angular.module("app", ["ngResource", "ngRoute"]);
app.config(function($routeProvider) {
$routeProvider.when("/login", {
templateUrl: "login.html",
controller: "LoginController"
});
$routeProvider.when("/home", { …我试图编写一个小指令,用其他模板文件包装其内容.
这段代码:
<layout name="Default">My cool content</layout>
应该有这个输出:
<div class="layoutDefault">My cool content</div>
因为布局"默认"具有以下代码:
<div class="layoutDefault">{{content}}</div>
这里是指令的代码:
app.directive('layout', function($http, $compile){
return {
restrict: 'E',
link: function(scope, element, attributes) {
var layoutName = (angular.isDefined(attributes.name)) ? attributes.name : 'Default';
$http.get(scope.constants.pathLayouts + layoutName + '.html')
.success(function(layout){
var regexp = /^([\s\S]*?){{content}}([\s\S]*)$/g;
var result = regexp.exec(layout);
var templateWithLayout = result[1] + element.html() + result[2];
element.html($compile(templateWithLayout)(scope));
});
}
}
});
我的问题:
当我在模板中使用范围变量时(在布局模板中或布局标签内),例如.{{whatever}}它刚开始工作.如果我更新whatever变量,则指令不再更新.整个链接功能只会触发一次.
我认为,AngularJS不知道,该指令使用范围变量,因此不会更新.但我不知道如何解决这个问题.
我是Angular的新手,我正在尝试获取用户使用ng-model选择的单选按钮的值.但我没有在"选定的联系人"中获得任何输出.
这是我的HTML
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.2.0rc1/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<form name="myForm" ng-controller="Ctrl">
<table border="0">
<th>Contact Type</th>
<tr ng-repeat="contact in contacttype"><td>
<input type="radio" ng-model="contactname" name="group1" value="{{contact.name}}">{{contact.name}}
</td>
</td></tr></table>
<tt>selected contact = {{contactname}}</tt><br/>
</form>
</body>
</html>
下面是我的main.js
function Ctrl($scope) {
$scope.contacttype = [
{name: 'Both' },
{name: 'User'},
{name: 'Admin'}
];
}
我在这做错了什么？无法搞清楚!!!
我正在寻找一种方法来观察窗口内部宽度变化的变化.我尝试了以下内容,但没有奏效:
$scope.$watch('window.innerWidth', function() {
console.log(window.innerWidth);
});
有什么建议？
我是angularjs的新手.如何在angularjs中检测userAgent.是否可以在控制器中使用它？试过类似下面的东西,但没有运气!
var browserVersion = int((/msie (\d+)/.exec(lowercase(navigator.userAgent)) || [])[1]);
我需要专门检测IE9!
我正在尝试使用基于范围值的differtent模板制作指令.
这是我到目前为止所做的,我不知道为什么不起作用http://jsbin.com/mibeyotu/1/edit
HTML元素:
<data-type content-attr="test1"></data-type>
指示:
var app = angular.module('myApp', []);
app.directive('dataType', function ($compile) {
var testTemplate1 = '<h1>Test1</h1>';
var testTemplate2 = '<h1>Test2</h1>';
var testTemplate3 = '<h1>Test3</h1>';
var getTemplate = function(contentType){
var template = '';
switch(contentType){
case 'test1':
template = testTemplate1;
break;
case 'test2':
template = testTemplate2;
break;
case 'test3':
template = testTemplate3;
break;
}
return template;
};
var linker = function(scope, element, attrs){
element.html(getTemplate(scope.content)).show();
$compile(element.contents())(scope);
};
return {
restrict: "E",
replace: true,
link: linker,
scope: {
content:'='
} …关于如何在ngRepeat指令中实现项目删除有很多问题,正如我所知,它归结为使用ngClick并触发一些删除函数传递项目的$ index.
但是,我找不到任何有多个ngRepeats的示例:
<div ng-controller="MyController">
<div ng-repeat="email in user.emails">
{{ email }} <a href>Remove</a>
</div>
<div ng-repeat="phone in user.phones">
{{ phone }} <a href>Remove</a>
</div>
</div>
为此,我需要创建$ scope.removePhone和$ scope.removeEmail,这将使用ngClick on Remove anchor来调用.但我正在寻找更通用的解决方案.特别是因为我有很多页面有很多ngRepeats.
我正在考虑编写一个可以放在Remove锚点上的指令,并且会做类似这样的事情:
所以标记看起来像这样:
<div ng-controller="MyController">
<div ng-repeat="email in user.emails">
{{ email }} <a href remove-directive="$index">Remove</a>
</div>
<div ng-repeat="phone in user.phones">
{{ phone }} <a href …我想弄清楚为什么我$watch没有被触发.这是相关控制器的片段:
$scope.$watch('tasks', function (newValue, oldValue) {
//do some stuff
//only enters here once
//newValue and oldValue are equal at that point
});
$scope.tasks = tasksService.tasks();
$scope.addTask = function (taskCreationString) {
tasksService.addTask(taskCreationString);//modifies tasks array
};
在我看来,tasks显然正在更新正确,因为我的长度限制如下:
<span>There are {{tasks.length}} total tasks</span>
我错过了什么？