blocks|key|139927|text|如果你想在angularjs的控制之外对某个作用域值进行任何更改，比如jquery/javascript事件处理器，你需要使用$scope.$apply()。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|139928|function+change()+{
++++alert("a");
++++var+scope+=+angular.element($("#outer")).scope();
++++scope.$apply(function(){
++++++++scope.msg+=+'Superhero';
++++})
}|code-block|syntax|javascript|139929|演示：Fiddle|139930|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.angularjs.org/api/ng.$rootScope.Scope#$apply|1|http://jsfiddle.net/arunpjohny/sXkjc/8/^0|1R|F|0|0|0|3|6|1|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]]]

You need to use <a href="http://docs.angularjs.org/api/ng.$rootScope.Scope#$apply" rel="noreferrer">$scope.$apply()</a> if you want to make any changes to a scope value from outside the control of angularjs like a jquery/javascript event handler.

<pre><code>function change() {
 alert("a");
 var scope = angular.element($("#outer")).scope();
 scope.$apply(function(){
 scope.msg = 'Superhero';
 })
}
</code></pre>

Demo: <a href="http://jsfiddle.net/arunpjohny/sXkjc/8/" rel="noreferrer">Fiddle</a>

blocks|key|139942|text|我们可以在加载后调用它|type|unstyled|depth|inlineStyleRanges|entityRanges|data|139943|http://jsfiddle.net/gentletech/s3qtv/3/|offset|length|139944|<div+id="wrap"+ng-controller="Ctrl">
++++{{message}} 
++++{{info}}
++++</div>
++++<a++onClick="hi()">click+me+</a>

++++function+Ctrl($scope)+{
++++++++$scope.message+=+"hi+robi";
++++++++$scope.updateMessage+=+function(_s){
++++++++++++$scope.message+=+_s;++++
++++++++};
++++}

function+hi(){
++++var+scope+=+angular.element(document.getElementById("wrap")).scope();
++++++++scope.$apply(function()+{
++++++++scope.info+=+"nami";
++++++++scope.updateMessage("i+am+new+fans+like+nami");
++++});
}|code-block|syntax|javascript|139945|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|13|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|C]]]]

we can call it after loaded

<a href="http://jsfiddle.net/gentletech/s3qtv/3/">http://jsfiddle.net/gentletech/s3qtv/3/</a>

<pre><code>&lt;div id="wrap" ng-controller="Ctrl"&gt;
 {{message}}&lt;br&gt;
 {{info}}
 &lt;/div&gt;
 &lt;a onClick="hi()"&gt;click me &lt;/a&gt;

 function Ctrl($scope) {
 $scope.message = "hi robi";
 $scope.updateMessage = function(_s){
 $scope.message = _s; 
 };
 }

function hi(){
 var scope = angular.element(document.getElementById("wrap")).scope();
 scope.$apply(function() {
 scope.info = "nami";
 scope.updateMessage("i am new fans like nami");
 });
}
</code></pre>

blocks|key|357849|text|我已经很久没有问过这个问题了，但这里有一个不需要jquery的答案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|357850|function+change()+{
++++var+scope+=+angular.element(document.querySelector('#outside')).scope();
++++scope.$apply(function(){
++++++++scope.msg+=+'Superhero';
++++})
}|code-block|syntax|javascript|357851|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

It's been a long time since I asked this question, but here's an answer that doesn't require jquery:

<pre><code>function change() {
 var scope = angular.element(document.querySelector('#outside')).scope();
 scope.$apply(function(){
 scope.msg = 'Superhero';
 })
}
</code></pre>

blocks|key|357913|text|公认的答案是很棒的。我想看看在ng-repeat的上下文中角度范围发生了什么。问题是，Angular将为每个重复项创建一个子范围。当调用在原始$scope上定义的方法时，将保留其原始值(由于javascript闭包)。但是，this引用调用作用域/对象。只要你清楚什么时候$scope和this是相同的，什么时候是不同的，这就可以很好地工作。hth|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|357914|这里有一个小提琴演示了其中的区别：https://jsfiddle.net/creitzel/oxsxjcyc/|357915|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/creitzel/oxsxjcyc/^0|F|9|1Z|6|34|4|3S|6|3Z|4|0|H|13|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]|$9|U|A|V|B|C]|$9|W|A|X|B|C]|$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|10|8|@]|D|@$9|11|A|12|1|13]]|E|$]]|$1|H|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

The accepted answer is great. I wanted to look at what happens to the Angular scope in the context of <code>ng-repeat</code>. The thing is, Angular will create a sub-scope for each repeated item. When calling into a method defined on the original <code>$scope</code>, that retains its original value (due to javascript closure). However, the <code>this</code> refers the calling scope/object. This works out well, so long as you're clear on when <code>$scope</code> and <code>this</code> are the same and when they are different. hth

Here is a fiddle that illustrates the difference: <a href="https://jsfiddle.net/creitzel/oxsxjcyc/" rel="nofollow">https://jsfiddle.net/creitzel/oxsxjcyc/</a>

blocks|key|140073|text|<input+type="text"+class="form-control+timepicker2"+ng-model='programRow.StationAuxiliaryTime.ST88'+/>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|140074|访问作用域值|unstyled|140075|假设programRow.StationAuxiliaryTime是一个对象数组|140076|+$('.timepicker2').on('click',+function+()+
++++{
++++++++++++var+currentElement+=+$(this);

++++++++++++var+scopeValues+=+angular.element(currentElement).scope();
++++++++++++var+model+=+currentElement.attr('ng-model');
++++++++++++var+stationNumber+=+model.split('.')[2];
++++++++++++var+val+=+'';
++++++++++++if+(model.indexOf("StationWaterTime")+>+0)+{
++++++++++++++++val+=+scopeValues.programRow.StationWaterTime[stationNumber];
++++++++++++}
++++++++++++else+{
++++++++++++++++val+=+scopeValues.programRow.StationAuxiliaryTime[stationNumber];
++++++++++++}
++++++++++++currentElement.timepicker('setTime',+val);
++++++++});|140077|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$B|C]]|$1|K|3|-4|5|F|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<pre><code>&lt;input type="text" class="form-control timepicker2" ng-model='programRow.StationAuxiliaryTime.ST88' /&gt;
</code></pre>

accessing scope value

assume that programRow.StationAuxiliaryTime is an array of object 

<pre><code> $('.timepicker2').on('click', function () 
 {
 var currentElement = $(this);

 var scopeValues = angular.element(currentElement).scope();
 var model = currentElement.attr('ng-model');
 var stationNumber = model.split('.')[2];
 var val = '';
 if (model.indexOf("StationWaterTime") &gt; 0) {
 val = scopeValues.programRow.StationWaterTime[stationNumber];
 }
 else {
 val = scopeValues.programRow.StationAuxiliaryTime[stationNumber];
 }
 currentElement.timepicker('setTime', val);
 });
</code></pre>

blocks|key|140099|text|这里有一个可重用的解决方案：http://jsfiddle.net/flobar/r28b0gmq/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|140100|function+accessScope(node,+func)+{
++++var+scope+=+angular.element(document.querySelector(node)).scope();
++++scope.$apply(func);
}

window.onload+=+function+()+{

++++accessScope('#outer',+function+(scope)+{
++++++++//+change+any+property+inside+the+scope
++++++++scope.name+=+'John';
++++++++scope.sname+=+'Doe';
++++++++scope.msg+=+'Superhero';
++++});

};|code-block|syntax|javascript|140101|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/flobar/r28b0gmq/^0|E|10|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

Here's a reusable solution: <a href="http://jsfiddle.net/flobar/r28b0gmq/" rel="nofollow">http://jsfiddle.net/flobar/r28b0gmq/</a>

<pre><code>function accessScope(node, func) {
 var scope = angular.element(document.querySelector(node)).scope();
 scope.$apply(func);
}

window.onload = function () {

 accessScope('#outer', function (scope) {
 // change any property inside the scope
 scope.name = 'John';
 scope.sname = 'Doe';
 scope.msg = 'Superhero';
 });

};
</code></pre>

blocks|key|140125|text|我是新手，很抱歉这是个坏习惯。根据选择的答案，我执行了以下函数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|140126|function+x_apply(selector,+variable,+value)+{
++++var+scope+=+angular.element(+$(selector)+).scope();
++++scope.$apply(function(){
++++++++scope[variable]+=+value;
++++});
}|code-block|syntax|javascript|140127|我是这样使用的：|140128|x_apply('#fileuploader',+'thereisfiles',+true);|140129|顺便说一句，我的英语很抱歉|140130|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I'm newbie, so sorry if is a bad practice. Based on the chosen answer, I did this function:

<pre><code>function x_apply(selector, variable, value) {
 var scope = angular.element( $(selector) ).scope();
 scope.$apply(function(){
 scope[variable] = value;
 });
}
</code></pre>

I'm using it this way:

<pre><code>x_apply('#fileuploader', 'thereisfiles', true);
</code></pre>

By the way, sorry for my english

blocks|key|358008|text|您还可以尝试：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|358009|function+change()+{
++++var+scope+=+angular.element(+document.getElementById('outer')+).scope();
++++scope.$apply(function(){
++++++++scope.msg+=+'Superhero';
++++})
}|code-block|syntax|javascript|358010|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can also try:

<pre><code>function change() {
 var scope = angular.element( document.getElementById('outer') ).scope();
 scope.$apply(function(){
 scope.msg = 'Superhero';
 })
}
</code></pre>

I'm trying to see if there's a simple way to access the internal scope of a controller through an external javascript function (completely irrelevant to the target controller)

I've seen on a couple of other questions here that

<code>angular.element("#scope").scope();</code>

would retrieve the scope from a DOM element, but my attempts are currently yielding no proper results.

Here's the jsfiddle: <a href="http://jsfiddle.net/sXkjc/5/">http://jsfiddle.net/sXkjc/5/</a>

I'm currently going through a transition from plain JS to Angular. The main reason I'm trying to achieve this is to keep my original library code intact as much as possible; saving the need for me to add each function to the controller.

Any ideas on how I could go about achieving this? Comments on the above fiddle are also welcome.

AngularJS access scope from outside js function

我正在尝试看看是否有一种简单的方法可以通过外部javascript函数访问控制器的内部作用域(与目标控制器完全无关)。我在这里看到了其他几个问题，angular.element("#scope").scope();将从DOM元素检索作用域，但是我的尝试当前没有产生适当的结果。这是jsfiddle：我目前正在经历从普通J...

问来自外部的AngularJS访问作用域js函数
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问来自外部的AngularJS访问作用域js函数EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问来自外部的AngularJS访问作用域js函数
EN