我需要在指令内的回调中修改根范围属性.但该指令位于由switch指令创建的内部作用域中.
HTML
<div ng-app="app" ng-controller='AppController'>
<p>Selected: {{ selected }}</p>
<div ng-switch on="selected">
<div ng-switch-default>
<p>Item: {{ selected }}</p>
<custom-tag selected-item="selected" />
</div>
<div ng-switch-when="New value">
<p>Worked</p>
</div>
</div>
</div>
JavaScript的
angular.module('app', [])
.directive("customTag", [function () {
return {
restrict: "E",
replace: true,
template: "<input type='button' value='Click me' />",
link: function (scope, element, attrs) {
element.bind('click', function () {
scope[attrs.selectedItem] = "New value";
scope.$apply();
});
}
};
}]);
function AppController($scope) {
$scope.selected = 'Old value';
}
小提琴:http://jsfiddle.net/nJ7FQ/
我的目标是能够在Selected区域中显示"New …
我想找出AngularJS中的.config和.run函数之间的区别.我正在使用我.config来设置路线,但我确实有一些$on用于观察路线更改开始和成功事件.
然后我移动了一些代码,.run因为我有一些依赖注入问题.config.
我终于将其中一部分移到了CommonAppController我设置的部分上<body>.
我也有2个.config,似乎运行正常,但肯定这不对吗？
任何人都可以对使用哪种方法有所了解？
在我的应用程序中,我使用ng-click指令绑定了几个元素,如下所示
<a ng-click="DoSomething()"/>
<button ng-click="DoSomethingElse()">xyz</button>
<span ng-click="DoSomething()"></span>
现在我在某些情况下的应用程序中我希望发生ng-click的默认行为,但在某些情况下我想完全禁用要调用的回调函数(DoSomething(),DoSomethingElse()..).
为了检查这种情况,我有一个范围变量说 $scope.IsClickEnable = true/false;
那么我怎样才能完成这种行为呢？
我可以使用ng-disable来禁用元素,但它只适用于按钮类型的元素,因此在我的场景中不起作用
我还可以检查每个函数调用中的条件,但我想通过覆盖ng-click行为或其他东西来实现这一目标.
angularjs angularjs-directive angularjs-scope angularjs-ng-click
我有一个应用程序,我正在构建角度,我有大约8-10个视图来构建.所有视图都有一个共享的页脚,基于视图和一组业务规则,我需要有条件地显示/隐藏页脚上的一些内容.
所以.我有每个视图的控制器,然后一个页脚.我使用ng-include包含公共页脚布局,其中我包含的html引用了ng-controller中的页脚控制器.
的index.html
<body ng-controller="MainCtrl as vm">
<p>Message from Main Controller '{{vm.mainMessage}}'</p>
<div ng-include="'commonFooter.html'"></div>
</body>
commonFooter.html
<div ng-controller="FooterCtrl as vm">
<p>Message from Footer Controller '{{vm.message}}'</p>
<p ng-show="vm.showSomthing">Conditional footer Content</p>
</div>
我希望每个视图控制器确定页脚的状态以及是否隐藏特定内容.(下面的shouldDisplaySomthingInFooter)
app.controller('MainCtrl', function($scope) {
var vm = this;
vm.mainMessage= 'HEELO';
vm.shouldDisplaySomthingInFooter = true;
window.console.log('Main scope id: ' + $scope.$id);
});
然后我打算在FooterController中返回到父控制器并提取特定设置以根据业务规则启用/禁用内容.
app.controller('FooterCtrl', function($scope) {
var vm = this;
vm.message = 'vm footer';
window.console.log('Footer scope id: ' + $scope.$id);
window.console.log('Footer parent scope id: ' + $scope.$parent.$id);
window.console.log('Footer grandparent scope id: …在我的测试中,给出了2个文档,A和B.在A文档中,有一个iframe,iframe源是B文档.我的问题是如何修改B文件的某些变量范围？
这是我的代码:一份文件
<html lang="en" ng-app="">
<head>
<meta charset="utf-8">
<title>Google Phone Gallery</title>
<script type='text/javascript' src="js/jquery-1.10.2.js"></script>
<script type='text/javascript' src="js/angular1.0.2.min.js"></script>
<script>
var g ;
function test($scope,$http,$compile)
{
$scope.tryget = function(){
var iframeContentWindow = $("#iframe")[0].contentWindow;
var iframeDOM = $("#iframe")[0].contentWindow.document;
var target = $(iframeDOM).find("#test2");
var iframeAngular = iframeContentWindow.angular;
var iframeScope = iframeAngular.element("#test2").scope();
iframeScope.parentcall();
iframeContentWindow.angular.element("#test2").scope().tempvalue = 66 ;
iframeScope.tempvalue = 66;
iframeContentWindow.tt = 22;
iframeScope.parentcall();
console.log(iframeScope.tempvalue);
console.log(angular.element("#cont").scope());
}
}
</script>
</head>
<body>
<div ng-controller="test">
<div id="cont" >
<button ng-click="tryget()">try</button>
</div>
</div>
<iframe src="test2.html" id="iframe"></iframe>
</body>
</html> …我正在尝试编写一个使用隔离范围和ngModel指令的指令.
问题:
在指令中更新模型时,调用者的值不会更新.
HTML:
<test-ng-model ng-model="model" name="myel"></test-ng-model>
指示:
app.directive(
'testNgModel', [
'$timeout',
'$log',
function ($timeout, $log) {
function link($scope, $element, attrs, ctrl) {
var counter1 = 0, counter2 = 0;
ctrl.$render = function () {
$element.find('.result').text(JSON.stringify(ctrl.$viewValue))
}
$element.find('.one').click(function () {
if ($scope.$$phase) return;
$scope.$apply(function () {
var form = angular.isObject(ctrl.$viewValue) ? ctrl.$viewValue : {};
form.counter1 = ++counter1;
ctrl.$setViewValue(form);
});
});
$element.find('.two').click(function () {
if ($scope.$$phase) return;
$scope.$apply(function () {
var form = angular.isObject(ctrl.$viewValue) ? ctrl.$viewValue : {};
form.counter2 = ++counter2; …我使用简单的方法ng-repeat来生成国家列表.每个列表中都有一个隐藏的行/ div,可以展开和折叠.
我面临的问题是,在我将Angular引入我的应用程序之前,我手动硬编码了元素的ID,例如:
<li data-show="#country1">
{{country.name}} has population of {{country.population}}
<div id="country1">
<p>Expand/collapse content
</div>
</li>
<li data-show="#country2">
{{country.name}} has population of {{country.population}}
<div id="country2">
<p>Expand/collapse content
</div>
</li>
<li data-show="#country3">
{{country.name}} has population of {{country.population}}
<div id="country3">
<p>Expand/collapse content
</div>
</li>
<li data-show="#country4">
{{country.name}} has population of {{country.population}}
<div id="country4">
<p>Expand/collapse content
</div>
</li>
新代码使用ng-repeat:
<li ng-repeat="country in countries" data-show="????">
{{country.name}} has population of {{country.population}}
<div id="???">
<p>Expand/collapse content
</div>
</li>
如何在我的动态/增量ID中分配ng-repeat？
angularjs angularjs-directive ng-repeat angularjs-scope angularjs-ng-repeat
我很困惑控制器何时实例化.此外,嵌套状态时控制器如何实例化.我可能会对范围如何附加到视图和控制器感到困惑,也就是说,如果每个视图都有自己的控制器和范围,或者它们共享相同的范围.
有人可以解释控制器何时实例化？在嵌套路由下,所有视图共享一个控制器和范围吗？当我切换状态并返回状态会发生另一个控制器实例化时会发生什么？
以下是我的路线(配置文件):
.config (googleAnalyticsCordovaProvider, $stateProvider, $urlRouterProvider, IdleProvider, KeepaliveProvider) ->
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppController'
})
.state('app.pincode', {
url: '/pincode',
views: {
menuContent: {
templateUrl: 'templates/pincode-yield.html',
controller: 'PincodeController'
}
}
})
.state('app.pincode.create', {
url: '/create',
views: {
pincode: {
templateUrl: 'templates/pincode-create.html',
controller: 'PincodeController'
}
}
})
.state('app.pincode.pincodeLogin', {
url: '/login',
views: {
pincode: {
templateUrl: 'templates/pincode-login.html',
controller: 'PincodeController'
}
}
})
.state('app.pincode.settings', {
url: '/settings',
views: {
pincode: {
templateUrl: 'templates/settings.html',
controller: 'PincodeController'
} …angularjs angularjs-scope angularjs-routing angular-ui-router
我目前正在开发一个基于Web的Twitter客户端,因此我使用了angular.js,node.js和socket.io.我通过socket.io将新推文推送到我的客户端,服务等待新的推文.当一条新的推文到达时,该服务通过$ broadcast发送一个事件.
在我的控制器中是一个事件监听器,其中传入的推文正在单独的功能中处理.这个函数只是在我的推文范围内推送新的推文.
现在,我的问题是,我的观点没有更新,但我可以看到我的范围在增长.也许你们其中一个人有想法,我怎么能解决这个问题？
另外我的代码:
服务:
(function () {
app.factory('Push', ['$rootScope', function ($rootScope) {
socket.on('new-tweet', function (msg) {
$rootScope.$broadcast('new-tweet', msg);
});
}]);
}());
控制器:
(function () {
app.controller("StreamCtrl", function StreamCtrl ($scope, $rootScope, $http, Push) {
$scope.tweets = [];
$http
.get('/stream')
.then(function (res) {
$scope.tweets = res.data;
});
$scope.addTweet = function (data) {
$scope.tweets.push(data);
console.log($scope.tweets);
};
$rootScope.$on('new-tweet', function (event, data) {
if (!data.friends) {
$scope.addTweet(data);
}
});
});
}());
请帮我实现这个功能.我的一系列物品$scope.现在,当我单击Add Item按钮时,我想将一个新项目推送到该数组的第一个索引或0索引.提前致谢.:)
这是一个有用的jsFiddle:http://jsfiddle.net/limeric29/7FH2e/
HTML:
<div ng-controller="Ctrl">
{{data}}<br/>
<input type="button" ng-click="addItem()" value="Add Item" />
</div>
JavaScript的:
function Ctrl($scope) {
$scope.data = [
new String('Item 5'), new String('Item 4'), new String('Item 3'), new String('Item 2'), new String('Item 1')];
$scope.addItem = function () {
var c = $scope.data.length + 1;
var item = new String('Item ' + c)
$scope.data.push(item);
};
}