Tag: angularjs scope
在ng-repeat中由ng-click调用的赋值expression式的行为
我试图用ng-click来更新我的模型，附加到<p> 。 我在ng-repeat 之外的赋值expression式，或者在ng-repeat 内部调用一个scope方法都没有问题。 但是，如果我在ng-repeat使用了一个赋值，它似乎被忽略了。 我在Firefox控制台中看不到任何消息，但没有尝试设置断点以查看事件是否正在触发。 <!DOCTYPE html> <html> <head> <title>Test of ng-click</title> <script type='text/javascript' src='http://code.angularjs.org/1.1.1/angular.js'></script> <script type='text/javascript'>//<![CDATA[ function MyCtrl($scope) { $scope.selected = ""; $scope.defaultValue = "test"; $scope.values = ["foo", "bar", "baz"]; $scope.doSelect = function(val) { $scope.selected = val; } } //]]> </script> </head> <body ng-app> <div ng-controller='MyCtrl'> <p>Selected = {{selected}}</p> <hr/> <p ng-click='selected […]
如何从作为可重用组件的指令公开API？
有一个angular度是一个可重用组件的指令，公开的API可以从控制器访问的最佳做法是什么？ 所以当有多个组件的实例时，你可以从控制器访问 angular.directive('extLabel', function { return { scope: { name: '@', configObj: '=' }, link: function(scope, iElement, iAttrs) { // this could be and exposed method scope.changeLabel = function(newLabel) { scope.configObj.label = newLabel; } } } }); 然后当有： <ext-label name="extlabel1" config-obj="label1"></ext-label> <ext-label name="extlabel2" config-obj="label2"></ext-label> <ext-label name="extlabel3" config-obj="label3"></ext-label> 我怎样才能访问控制器中的extLabel2的scope.changeLabel？ 是否有意义？
$ scope。$ root和$ rootScope有什么区别？
我在控制器中看到$ scope有$ root，这是什么？ 它和$ rootScope有什么不同，它可以注入到控制器中？
AngularJS条件ng-disabled不能重新启用
给定一个使用ng-disabled="truthy_scope_variable"的有条件禁用的文本input字段，AngularJS在范围variables第一次被伪造时禁用该字段，但是在随后的变化中不启用它。 因此，该领域仍然残疾。 我只能假设出了问题，但是控制台日志是空的。 truthy范围variables绑定到一个单选button模型，我甚$watch可以$watch它的变化，但input字段的ng-disabled没有按预期工作。 我已经手动尝试调用$apply ，但它看起来像Angular触发DOM更改。 在控制器中： $scope.new_account = true 单选button： <input type="radio" ng-model="new_account" name="register" id="radio_new_account" value="true" /> <input type="radio" ng-model="new_account" name="register" id="radio_existing_account" value="false" /> 有条件禁用的input字段： <input type="password" ng-disabled="new_account" id="login-password" name="password" ng-model="password" /> 如果我最初设置$scope.new_account = false ，该字段呈现禁用，但从来没有重新启用。 为什么发生这种情况？
AngularJS访问控制器$范围从外部
var theApp = angular.module('theApp', []); var app = angular.module('theApp', ['ui.bootstrap']); app.controller('MenuSideController', ['$scope','SnazzyService','$modal','$log', function($scope, SnazzyService, $modal, $log) { $scope.user.zoomlvl = '2'; }]); 我有上面的控制器，它设置$scope ，我只能从里面访问值。 但我看到的地方使用下面我将能够访问$scope但是当我console.log($scope) $scope.user.zoomlvl它不存在。 我不知道如何访问MenuSideController $范围，并用valZoomvariables更新。 var appElement = document.querySelector('[ng-app=theApp]'); var $scope = angular.element(appElement).scope(); console.log($scope); $scope.$apply(function() { $scope.user.zoomlvl = valZoom; });
如何$观看由ng-repeat创build的模型的更改？
例如，考虑这个Plnkr 。 我不知道有多lessfooCollection会员会被预先创build。 所以我不知道有多lessbar模型将会存在。 但是我知道他们将成为angular色模型，我知道他们将会在哪里。 我该如何做$watch ？ 我需要这样做，因为我需要在更改bar模型时触发行为。 观察fooCollection本身是不够的， $watch bar监听器不会在更改bar时触发。 相关html： <body ng-controller="testCtrl"> <div ng-repeat="(fooKey, foo) in fooCollection"> Tell me your name: <input ng-model="foo.bar"> <br /> Hello, my name is {{ foo.bar }} </div> <button ng-click="fooCollection.push([])">Add a Namer</button> </body> 相关JS： angular .module('testApp', []) .controller('testCtrl', function ($scope) { $scope.fooCollection = []; $scope.$watch('fooCollection', function (oldValue, newValue) […]
ng-click在指令的模板中不起作用
有angular的noob在这里。 我正在创build一个recursion显示问题和子问题树的指令。 我正在使用模板中的一个链接，在范围内调用一个函数。 出于某种原因，它不会调用editQuestion()方法。 这是代码和小提琴http://jsfiddle.net/madhums/n9KNv/ HTML： <div ng-controller="FormCtrl"> <questions value="survey.questions"></questions> </div> 使用Javascript： var app = angular.module('myApp', []); function FormCtrl ($scope) { $scope.editQuestion = function (question) { alert('abc'); }; $scope.survey = { // … } } app.directive('questions', function($compile) { var tpl = '<ol ui-sortable' + ' ng-model="value"' + ' class="list">' + ' <li ng-repeat="question in value […]
Angular JS Scaling＆Performance
我们正在用我们正在为银行build立的一个Angular应用程序来解决性能问题。 不幸的是，显示代码片段是违反合同的。 无论如何，我可以描述一些正在进行的主要问题，我希望可以推荐最佳做法。 应用结构： 本质上，一个巨大的多表格页面。 每种forms都是自己的部分，嵌套的控制器和局部约3层深。 在json对象的集合上重复相同的forms。 每个表单都绑定到重复的对象/模型。 我们应该支持页面上1-200个表单的任何地方。 如果你看看时间表。 我们花费了大量的时间在jQueryparsinghtml方法，jQuery重新计算stye方法，GC事件（垃圾收集）。 我想尽量减less这些应该加快一点点。 它们都是Angular生命周期的一部分，但是可能有更好的方法来避免它们。 这里是剖析器的一些截图： 最终，应用程序是缓慢的，因为重复forms的数量超过了5个。每个forms与其他forms是相对无关的。 我们已经尽量不要在表单之间观看任何共享属性。
自定义子指令访问父级的范围
我在我的angularJS应用程序中有两个自定义指令。 一个作为父母，另一个作为孩子。 我正试图访问父指令的子范围内的范围。 但我没有得到所需的输出。 <div ng-controller="CountryCtrl"> {{myName}} <div ng-controller="StateCtrl"> <state nameofthestate="'Tamilnadu'"> <city nameofthecity="'Chennai'"></city> </state> </div> </div> 和我的脚本看起来像 var app = angular.module("sampleApp",[]); app.controller("CountryCtrl",function($scope){ $scope.myName = "India"; }); app.controller("StateCtrl",function($scope){ }); app.directive("state",function(){return { restrict : 'E', transclude: true, scope : { myName : '=nameofthestate'}, template:"** {{myName}} is inside {{$parent.myName}}<br/><ng-transclude></ng-transclude>" }}); app.directive("city",function(){return { restrict : 'E', require:'^state', scope : […]
Angularjs – $ rootScope中的指令链接函数
我在问这个问题，因为我不太清楚如何将rootcope作为依赖传递给指令 我有一个指令，需要显示$ rootScope的一些信息… 我以为我需要将$ rootScope传递给一个指令，但是当我写这样的指令似乎工作。 .directive("myBar", function () { return { restrict: "E", transclude: true, replace: true, template: '<div>' + '<span ng-transclude></span>' + '{{rsLabels.welcome}} {{rsUser.firstName}}!' + '</div>' } }) 我什么时候需要这样做？ .directive("myBar", function ($rootScope) { return { restrict: "E", transclude: true, replace: true, template: '<div>' + '<span ng-transclude></span>' + '{{rsLabels.welcome}} {{rsUser.firstName}}!' + '</div>' } }) 我可以和如何使用rootScope，如果我需要它在指令的链接function […]
