AngularJS 1.5+ 组件不支持 Watchers，有什么解决办法? [英] AngularJS 1.5+ Components do not support Watchers, what is the work around?

查看：34 发布时间：2021/11/9 1:45:21 angularjs angularjs-directive angularjs-scope angularjs-components angularjs-1.5

本文介绍了AngularJS 1.5+ 组件不支持 Watchers，有什么解决办法?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我一直在将我的自定义指令升级到新的组件架构.我读过组件不支持观察者.这样对吗?如果是这样，您如何检测对象的变化?对于一个基本的例子，我有一个自定义组件 myBox ，它有一个子组件 game ，在 game 上有一个绑定.如果游戏组件中有更改游戏，我如何在 myBox 中显示警报消息?我知道有 rxJS 方法是否可以纯粹以角度来做到这一点?我的 JSFiddle

JavaScript

var app = angular.module('myApp', []);app.controller('mainCtrl', function($scope) {$scope.name = "托尼·丹扎";});app.component("myBox", {绑定:{}，控制器:函数($element){var myBox = this;myBox.game = '魔兽世界';//如果 myBox.game 发生变化，则显示警告消息 'NAME CHANGE'},controllerAs: 'myBox',templateUrl: "/template",转置:真实})app.component("游戏", {绑定:{游戏:'='}，控制器:函数($element){var 游戏 = 这个；},controllerAs: '游戏',templateUrl: "/template2"})

HTML


<script type="text/ng-template" id="/template"><div style='width:40%;border:2px solid black;background-color:yellow'>您最喜欢的游戏是:{{myBox.game}}<game game='myBox.game'></game>
<script type="text/ng-template" id="/template2"><div></br>改变游戏<textarea ng-model='game.game'></textarea>

嗨{{name}}<我的盒子></my-box></div>

解决方案

Writing Components without 观察者

这个答案概述了在不使用观察者.

使用ng-change指令
使用 $onChanges生命周期钩子
使用$doCheck生命周期钩子
组件间通信与 require
使用 RxJS

<小时>

使用`ng-change`指令

<块引用>

在准备 AngularJs2 时，有哪些替代方法可以在不使用 watch 的情况下观察 obj 状态变化?

您可以使用 ng-change 指令对输入更改做出反应.

</textarea></code></pre><p>并且要将事件传播到父组件，需要将事件处理程序添加为子组件的属性.</p><pre><code><game game='myBox.game' game-change='myBox.gameChange($value)'></game></code></pre><p>JS</p><pre><code>app.component("游戏", {绑定:{游戏:'='，gameChange: '&'},控制器:函数(){var 游戏 = 这个；game.textChange = 函数(值){game.gameChange({$value: value});});},controllerAs: '游戏',templateUrl: "/template2"});</code></pre><p>在父组件中:</p><pre><code>myBox.gameChange = function(newValue) {控制台日志(新值)；});</code></pre><p>这是未来的首选方法.使用 <code>$watch</code> 的 AngularJS 策略是不可扩展的，因为它是一种轮询策略.当 <code>$watch</code> 侦听器的数量达到 2000 左右时，UI 变得迟钝.Angular 2 中的策略是让框架更具反应性，避免将 <code>$watch</code> 放在 <code>$scope</code> 上.</p><小时><h2>使用 <code>$onChanges</code> 生命周期挂钩</h2><p>在<strong>版本 1.5.3</strong> 中，AngularJS 向 <code>$compile</code> 服务添加了 <code>$onChanges</code> 生命周期钩子.</p><p>来自文档:</p><块引用><p>控制器可以提供以下方法作为生命周期钩子:</p><ul><li>$onChanges(changesObj) - 每当更新单向 (<code><</code>) 或插值 (<code>@</code>) 绑定时调用.<code>changesObj</code> 是一个散列，其键是已更改的绑定属性的名称，值是 <code>{ currentValue: ..., previousValue: ... } 形式的对象</代码>.使用此钩子触发组件内的更新，例如克隆绑定值以防止意外更改外部值.</li></ul><p><a href="https://docs.angularjs.org/api/ng/service/$compile#life-cycle-hooks" rel="noreferrer">——AngularJS综合指令API参考——生命周期钩子</a></p></blockquote><p><code>$onChanges</code> 钩子用于通过 <code><</code> 单向绑定对组件的外部更改做出反应.<code>ng-change</code> 指令用于从带有 <code>&</code> 绑定的组件外部的 <code>ng-model</code> 控制器传播更改.</p><小时><h2>使用 <code>$doCheck</code> 生命周期挂钩</h2><p>在<strong>版本 1.5.8</strong> 中，AngularJS 向 <code>$compile</code> 服务添加了 <code>$doCheck</code> 生命周期钩子.</p><p>来自文档:</p><块引用><p>控制器可以提供以下方法作为生命周期钩子:</p><ul><li><code>$doCheck()</code> - 在摘要循环的每一轮调用.提供了检测变化并采取行动的机会.您希望为响应您检测到的更改而采取的任何操作都必须从此挂钩调用；实现这一点对 <code>$onChanges</code> 何时被调用没有影响.例如，如果您希望执行深度相等性检查或检查 Date 对象，Angular 的更改检测器不会检测到其更改，因此不会触发 <code>$onChanges</code>，则此钩子可能很有用.这个钩子是不带参数调用的；如果检测到更改，则必须存储先前的值以与当前值进行比较.</li></ul><p><a href="https://docs.angularjs.org/api/ng/service/$compile#life-cycle-hooks" rel="noreferrer">——AngularJS综合指令API参考——生命周期钩子</a></p></blockquote><p><小时><h1>与<code>require</code></h1>的组件间通信<p>指令可以<a href="https://docs.angularjs.org/api/ng/service/$compile#-require-" rel="noreferrer">要求</a>其他指令的控制器启用彼此之间的通信.这可以通过为 <a href="https://docs.angularjs.org/api/ng/service/$compile#-require-" rel="noreferrer">require<提供对象映射在组件中实现/a> 属性.对象键指定所需控制器(对象值)将在其下绑定到所需组件的控制器的属性名称.</p><pre><code>app.component('myPane', {转置:真实，要求: {tabsCtrl: '^myTabs'},绑定:{标题: '@'},控制器:函数(){this.$onInit = function() {this.tabsCtrl.addPane(this);控制台日志(这个)；};},templateUrl: 'my-pane.html'});</code></pre><p>有关更多信息，请参阅<a href="https://docs.angularjs.org/guide/component#intercomponent-communication" rel="noreferrer">AngularJS 开发人员指南 - 组件间通信</a></p><小时><h1>使用 <a href="https://github.com/Reactive-Extensions/rx.angular.js" rel="noreferrer">RxJS</a></h1> 从服务推送值<块引用><p>例如，在您拥有一个保持状态的服务的情况下呢?我如何将更改推送到该服务，以及页面上的其他随机组件是否知道此类更改?最近一直在努力解决这个问题</p></blockquote><p>使用 <a href="https://github.com/Reactive-Extensions/rx.angular.js" rel="noreferrer">RxJS Extensions for Angular</a> 构建服务.</p><pre><code><script src="//unpkg.com/angular/angular.js"></script><script src="//unpkg.com/rx/dist/rx.all.js"></script><script src="//unpkg.com/rx-angular/dist/rx.angular.js"></script></code></pre><p></p><pre><code>var app = angular.module('myApp', ['rx']);app.factory("DataService", function(rx) {var 主题 = 新 rx.Subject();var data = "初始";返回 {集:函数集(d){数据 = d;主题.onNext(d);},获取:函数获取(){返回数据；},订阅:功能(o){返回主题.订阅(o)；}};});</code></pre><p>然后只需订阅更改即可.</p><pre><code>app.controller('displayCtrl', function(DataService) {var $ctrl = this;$ctrl.data = DataService.get();var subscription = DataService.subscribe(function onNext(d) {$ctrl.data = d;});this.$onDestroy = 函数(){订阅.处置()；};});</code></pre><p>客户端可以使用 <code>DataService.subscribe</code> 订阅更改，生产者可以使用 <code>DataService.set</code> 推送更改.</p><p><a href="https://plnkr.co/edit/YVKGhCx0DrzyzckMDjtv?p=preview" rel="noreferrer">PLNKR 上的演示</a>.</p><p>I've been upgrading my custom directives to the new <a href="https://docs.angularjs.org/guide/component#component-based-application-architecture" rel="nofollow noreferrer">component architecture</a>. I've read that components do not support watchers. Is this correct? If so how do you detect changes on an object? For a basic example I have custom component <code>myBox</code> which has a child component game with a binding on the game . If  there is a change game within the game component how do I show an alert message within the myBox? I understand there is rxJS method is it possible to do this purely in angular? My <a href="https://jsfiddle.net/bkarv/swv22g3s/" rel="nofollow noreferrer">JSFiddle</a></p>

<p><strong>JavaScript</strong></p><pre><code>var app = angular.module('myApp', []);
app.controller('mainCtrl', function($scope) {

   $scope.name = "Tony Danza";

});

app.component("myBox",  {
      bindings: {},
      controller: function($element) {
        var myBox = this;
        myBox.game = 'World Of warcraft';
        //IF myBox.game changes, show alert message 'NAME CHANGE'
      },
      controllerAs: 'myBox',
      templateUrl: "/template",
      transclude: true
})
app.component("game",  {
      bindings: {game:'='},
      controller: function($element) {
        var game = this;


      },
      controllerAs: 'game',
      templateUrl: "/template2"
})
</code></pre><p><strong>HTML</strong></p><pre><code><div ng-app="myApp" ng-controller="mainCtrl">
  <script type="text/ng-template" id="/template">
    <div style='width:40%;border:2px solid black;background-color:yellow'>
      Your Favourite game is: {{myBox.game}}
      <game game='myBox.game'></game>
    </div>
  </script>

 <script type="text/ng-template" id="/template2">
    <div>
    </br>
        Change Game
      <textarea ng-model='game.game'></textarea>
    </div>
  </script>

  Hi {{name}}
  <my-box>

  </my-box>

</div><!--end app-->
</code></pre><p>
</p><div class="h2_lin"> 解决方案 </div><p><h2>Writing Components without <a href="https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch" rel="noreferrer">Watchers</a></h2>

<p>This answer outlines five techniques to use to write AngularJS 1.5 components without using <a href="https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch" rel="noreferrer">watchers.</a></p>

<ul>
<li>Use the <a href="https://docs.angularjs.org/api/ng/directive/ngChange" rel="noreferrer"><code>ng-change</code> Directive</a></li>
<li>Use the <a href="https://docs.angularjs.org/api/ng/service/$compile#life-cycle-hooks" rel="noreferrer"><code>$onChanges</code> Life-cycle Hook</a></li>
<li>Use the <a href="https://docs.angularjs.org/api/ng/service/$compile#life-cycle-hooks" rel="noreferrer"><code>$doCheck</code> Life-cycle Hook</a></li>
<li>Intercomponent Communication with <a href="https://docs.angularjs.org/api/ng/service/$compile#-require-" rel="noreferrer">require</a></li>
<li>Push Values from a Service with <a href="https://github.com/Reactive-Extensions/rx.angular.js" rel="noreferrer">RxJS</a></li>
</ul>

<hr>

<h2>Use the <code>ng-change</code> Directive</h2>

</p><blockquote>
  <p>what alt methods available to observe obj state changes without using watch in preparation for AngularJs2?</p>
</blockquote><p>You can use the <code>ng-change</code> directive to react to input changes.</p><pre><code><textarea ng-model='game.game' 
          ng-change="game.textChange(game.game)">
</textarea>
</code></pre><p>And to propagate the event to a parent component, the event handler needs to be added as an attribute of the child component.</p><pre><code><game game='myBox.game' game-change='myBox.gameChange($value)'></game>
</code></pre><p>JS</p><pre><code>app.component("game",  {
      bindings: {game:'=',
                 gameChange: '&'},
      controller: function() {
        var game = this;
        game.textChange = function (value) {
            game.gameChange({$value: value});
        });

      },
      controllerAs: 'game',
      templateUrl: "/template2"
});
</code></pre><p>And in the parent component:</p><pre><code>myBox.gameChange = function(newValue) {
    console.log(newValue);
});
</code></pre><p>This is the preferred method going forward. The AngularJS strategy of using <code>$watch</code> is not scalable because it is a polling strategy. When the number of <code>$watch</code> listeners reaches around 2000, the UI gets sluggish. The strategy in Angular 2 is to make the framework more reactive and avoid placing <code>$watch</code> on <code>$scope</code>.</p>

<hr>

<h2>Use the <code>$onChanges</code> Life-cycle Hook</h2>

<p>With <strong>version 1.5.3</strong>, AngularJS added the <code>$onChanges</code> life-cycle hook to the <code>$compile</code> service.</p>

<p>From the Docs:</p><blockquote>
  <p>The controller can provide the following methods that act as life-cycle hooks:</p>
  
  <ul>
  <li>$onChanges(changesObj) - Called whenever one-way (<code><</code>) or interpolation (<code>@</code>) bindings are updated. The <code>changesObj</code> is a hash whose keys are the names of the bound properties that have changed, and the values are an object of the form <code>{ currentValue: ..., previousValue: ... }</code>. Use this hook to trigger updates within a component such as cloning the bound value to prevent accidental mutation of the outer value.</li>
  </ul>
  
  <p><a href="https://docs.angularjs.org/api/ng/service/$compile#life-cycle-hooks" rel="noreferrer">— AngularJS Comprehensive Directive API Reference -- Life-cycle hooks</a></p>
</blockquote><p>The <code>$onChanges</code> hook is used to react to external changes into the component with <code><</code> one-way bindings. The <code>ng-change</code> directive is used to propogate changes from the <code>ng-model</code> controller outside the component with <code>&</code> bindings. </p>

<hr>

<h2>Use the <code>$doCheck</code> Life-cycle Hook</h2>

<p>With <strong>version 1.5.8</strong>, AngularJS added the <code>$doCheck</code> life-cycle hook to the <code>$compile</code> service.</p>

<p>From the Docs:</p><blockquote>
  <p>The controller can provide the following methods that act as life-cycle hooks:</p>
  
  <ul>
  <li><code>$doCheck()</code> - Called on each turn of the digest cycle. Provides an opportunity to detect and act on changes. Any actions that you wish to take in response to the changes that you detect must be invoked from this hook; implementing this has no effect on when <code>$onChanges</code> is called. For example, this hook could be useful if you wish to perform a deep equality check, or to check a Date object, changes to which would not be detected by Angular's change detector and thus not trigger <code>$onChanges</code>. This hook is invoked with no arguments; if detecting changes, you must store the previous value(s) for comparison to the current values.</li>
  </ul>
  
  <p><a href="https://docs.angularjs.org/api/ng/service/$compile#life-cycle-hooks" rel="noreferrer">— AngularJS Comprehensive Directive API Reference -- Life-cycle hooks</a></p>
</blockquote><p>

<hr>

<h1>Intercomponent Communication with <code>require</code></h1>

<p>Directives can <a href="https://docs.angularjs.org/api/ng/service/$compile#-require-" rel="noreferrer">require</a> the controllers of other directives to enable communication between each other. This can be achieved in a component by providing an object mapping for the <a href="https://docs.angularjs.org/api/ng/service/$compile#-require-" rel="noreferrer">require</a> property. The object keys specify the property names under which the required controllers (object values) will be bound to the requiring component's controller.</p><pre><code>app.component('myPane', {
  transclude: true,
  require: {
    tabsCtrl: '^myTabs'
  },
  bindings: {
    title: '@'
  },
  controller: function() {
    this.$onInit = function() {
      this.tabsCtrl.addPane(this);
      console.log(this);
    };
  },
  templateUrl: 'my-pane.html'
});
</code></pre><p>For more information, see <a href="https://docs.angularjs.org/guide/component#intercomponent-communication" rel="noreferrer">AngularJS Developer Guide - Intercomponent Communicatation</a></p>

<hr>

<h1>Push Values from a Service with <a href="https://github.com/Reactive-Extensions/rx.angular.js" rel="noreferrer">RxJS</a></h1>

</p><blockquote>
  <p>What about in a situation where you have a Service that's holding state for example. How could I push changes to that Service, and other random components on the page be aware of such a change? Been struggling with tackling this problem lately</p>
</blockquote><p>Build a service with <a href="https://github.com/Reactive-Extensions/rx.angular.js" rel="noreferrer">RxJS Extensions for Angular</a>.</p><pre><code><script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/rx/dist/rx.all.js"></script>
<script src="//unpkg.com/rx-angular/dist/rx.angular.js"></script>
</code></pre><p>



</p><pre><code>var app = angular.module('myApp', ['rx']);

app.factory("DataService", function(rx) {
  var subject = new rx.Subject(); 
  var data = "Initial";

  return {
      set: function set(d){
        data = d;
        subject.onNext(d);
      },
      get: function get() {
        return data;
      },
      subscribe: function (o) {
         return subject.subscribe(o);
      }
  };
});
</code></pre><p>Then simply subscribe to the changes.</p><pre><code>app.controller('displayCtrl', function(DataService) {
  var $ctrl = this;

  $ctrl.data = DataService.get();
  var subscription = DataService.subscribe(function onNext(d) {
      $ctrl.data = d;
  });

  this.$onDestroy = function() {
      subscription.dispose();
  };
});
</code></pre><p>Clients can subscribe to changes with <code>DataService.subscribe</code> and producers can push changes with <code>DataService.set</code>. </p>

<p>The <a href="https://plnkr.co/edit/YVKGhCx0DrzyzckMDjtv?p=preview" rel="noreferrer">DEMO on PLNKR</a>.</p>

                        <p>这篇关于AngularJS 1.5+ 组件不支持 Watchers，有什么解决办法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！</p>
                        
                    </div>
                    <div class="arc-body-main-more">
                        <span onclick="unlockarc('2520582');">查看全文</span>
                    </div>
                </div>
				<div>
                            
                        </div>
                <div class="wwads-cn wwads-horizontal" data-id="166" style="max-width:100%;border: 4px solid #666;"></div>
            </div>
        </article>
        <div id="arc-ad-2" class="mb-1">
            <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5038752844014834"
     data-ad-slot="3921941283"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

        </div>
        <div class="widget bgwhite radius-1 mb-1 shadow widget-rel">
            <h5>相关文章</h5>
            <ul>
                    <li>
                        <a target="_blank" title="AngularJS 1.5+ 组件不支持 Watchers，有什么解决办法?" href="/2524537.html">
                            AngularJS 1.5+ 组件不支持 Watchers，有什么解决办法?;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="AngularJS 1.5+ 组件不支持 Watchers，有什么解决办法?" href="/2527302.html">
                            AngularJS 1.5+ 组件不支持 Watchers，有什么解决办法?;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="AngularJS 1.5+组件不支持Watchers，如何解决?" href="/1926917.html">
                            AngularJS 1.5+组件不支持Watchers，如何解决?;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何解决办法＆QUOT;包含＆QUOT;对于.NET 3.5不支持" href="/34686.html">
                            如何解决办法＆QUOT;包含＆QUOT;对于.NET 3.5不支持;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="解决办法是什么..？" href="/1060873.html">
                            解决办法是什么..？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="react.js - react es5的isMounted在es6中不支持，请问有什么解决办法" href="/720208.html">
                            react.js - react es5的isMounted在es6中不支持，请问有什么解决办法;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="Flutter Gridview 在列中.有什么解决办法..?" href="/2858682.html">
                            Flutter Gridview 在列中.有什么解决办法..?;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="大对象堆碎片:CLR有什么解决办法吗?" href="/2825360.html">
                            大对象堆碎片:CLR有什么解决办法吗?;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="大对象堆碎片：CLR有什么解决办法呢？" href="/11082.html">
                            大对象堆碎片：CLR有什么解决办法呢？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="为什么Maven会产生此错误：“ - 源1.5不支持...”？" href="/961429.html">
                            为什么Maven会产生此错误：“ - 源1.5不支持...”？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="播放框架2.1  -  AngularJS路由 - 最好的解决办法？" href="/196545.html">
                            播放框架2.1  -  AngularJS路由 - 最好的解决办法？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="ChoiceFieldRenderer已删除。解决办法是什么？" href="/2049562.html">
                            ChoiceFieldRenderer已删除。解决办法是什么？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="Weblogic Jaxws部署-类不支持JDK1.5" href="/2148308.html">
                            Weblogic Jaxws部署-类不支持JDK1.5;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="行家.-source 1.5 不支持 lambda 表达式" href="/2651105.html">
                            行家.-source 1.5 不支持 lambda 表达式;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="行家。 -source 1.5不支持lambda表达式" href="/958123.html">
                            行家。 -source 1.5不支持lambda表达式;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="Microsoft Edge是否支持IE8模式下的渲染?有什么解决办法吗?" href="/2276032.html">
                            Microsoft Edge是否支持IE8模式下的渲染?有什么解决办法吗?;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="金山云 - 直播播放的rtmp的录制目前不支持，能不能给个时间点或者解决办法？" href="/721114.html">
                            金山云 - 直播播放的rtmp的录制目前不支持，能不能给个时间点或者解决办法？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="weex - video组件不支持本地吗？" href="/709530.html">
                            weex - video组件不支持本地吗？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="为什么不支持网络？" href="/1027813.html">
                            为什么不支持网络？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="使用uuid,并不能利用mysql的索引，有什么解决办法？" href="/703128.html">
                            使用uuid,并不能利用mysql的索引，有什么解决办法？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="IIS不提供XFDF文件.解决办法是什么?" href="/1430353.html">
                            IIS不提供XFDF文件.解决办法是什么?;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="解决办法:汇总下游测试结果" href="/1471094.html">
                            解决办法:汇总下游测试结果;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="AngularJS +弹簧：415不支持的媒体类型" href="/204592.html">
                            AngularJS +弹簧：415不支持的媒体类型;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="angularjs 1.5 组件依赖注入" href="/2525560.html">
                            angularjs 1.5 组件依赖注入;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="难道闪光灯不支持用户名/密码的网址是什么？我有什么办法？" href="/41818.html">
                            难道闪光灯不支持用户名/密码的网址是什么？我有什么办法？;
                        </a>
                    </li>
            </ul>
        </div>
        <div class="mb-1">
            <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5038752844014834"
     data-ad-slot="3921941283"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

        </div>
    </div>
    <div class="side">
        <div class="widget widget-side bgwhite mb-1 shadow">
            <h5>其他开发最新文章</h5>
            <ul>
                    <li>
                        <a target="_blank" title="拒绝显示一个框架，因为它将'X-Frame-Options'设置为'sameorigin'" href="/893060.html">
                            拒绝显示一个框架，因为它将'X-Frame-Options'设置为'sameorigin';
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="什么是＆QUOT; AW＆QUOT;在部分标志属性是什么意思？" href="/303988.html">
                            什么是＆QUOT; AW＆QUOT;在部分标志属性是什么意思？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="在运行npm install命令时获取'npm WARN弃用'警告" href="/840917.html">
                            在运行npm install命令时获取'npm WARN弃用'警告;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="cmake无法找到openssl" href="/516280.html">
                            cmake无法找到openssl;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="从Spark的scala中的* .tar.gz压缩文件中读取HDF5文件" href="/850628.html">
                            从Spark的scala中的* .tar.gz压缩文件中读取HDF5文件;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="Twitter :: Error :: Forbidden  - 无法验证您的凭据" href="/630061.html">
                            Twitter :: Error :: Forbidden  - 无法验证您的凭据;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="我什么时候需要一个fb：app_id或者fb：admins？" href="/747981.html">
                            我什么时候需要一个fb：app_id或者fb：admins？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="将.db文件导入R" href="/902960.html">
                            将.db文件导入R;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="npm通知创建一个lockfile作为package-lock.json。你应该提交这个文件" href="/744854.html">
                            npm通知创建一个lockfile作为package-lock.json。你应该提交这个文件;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src'self'”" href="/819167.html">
                            拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src'self'”;
                        </a>
                    </li>
            </ul>
        </div>
        <div class="widget widget-side bgwhite mb-1 shadow">
            <h5>
                热门教程
            </h5>
            <ul>
                <li>
                    <a target="_blank" title="Java教程" href="/OnLineTutorial/java/index.html">
                        Java教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Apache ANT 教程" href="/OnLineTutorial/ant/index.html">
                        Apache ANT 教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Kali Linux教程" href="/OnLineTutorial/kali_linux/index.html">
                        Kali Linux教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="JavaScript教程" href="/OnLineTutorial/javascript/index.html">
                        JavaScript教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="JavaFx教程" href="/OnLineTutorial/javafx/index.html">
                        JavaFx教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="MFC 教程" href="/OnLineTutorial/mfc/index.html">
                        MFC 教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Apache HTTP客户端教程" href="/OnLineTutorial/apache_httpclient/index.html">
                        Apache HTTP客户端教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Microsoft Visio 教程" href="/OnLineTutorial/microsoft_visio/index.html">
                        Microsoft Visio 教程
                    </a>
                </li>
            </ul>
        </div>
        <div class="widget widget-side bgwhite mb-1 shadow">
            <h5>
                热门工具
            </h5>
            <ul>
                
                <li>
                    <a target="_blank" title="Java 在线工具" href="/Onlinetools/details/4">
                        Java 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="C(GCC) 在线工具" href="/Onlinetools/details/6">
                        C(GCC) 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="PHP 在线工具" href="/Onlinetools/details/8">
                        PHP 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="C# 在线工具" href="/Onlinetools/details/1">
                        C# 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Python 在线工具" href="/Onlinetools/details/5">
                        Python 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="MySQL 在线工具" href="/Onlinetools/Dbdetails/33">
                        MySQL 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="VB.NET 在线工具" href="/Onlinetools/details/2">
                        VB.NET 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Lua 在线工具" href="/Onlinetools/details/14">
                        Lua 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Oracle 在线工具" href="/Onlinetools/Dbdetails/35">
                        Oracle 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="C++(GCC) 在线工具" href="/Onlinetools/details/7">
                        C++(GCC) 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Go 在线工具" href="/Onlinetools/details/20">
                        Go 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Fortran 在线工具" href="/Onlinetools/details/45">
                        Fortran 在线工具
                    </a>
                </li>
            </ul>
        </div>
        
    </div>
</div>
<script type="text/javascript">var eskeys = 'angularjs,1.5+,组件,不支持,watchers,有,什么,解决办法'; var cat = 'cc';';//other-dev</script>
    </div>
<div id="pop" onclick="pophide();">
    <div id="pop_body" onclick="event.stopPropagation();">
        <h6 class="flex flex101">
            登录
            <span onclick="pophide();">关闭</span>
        </h6>
        <div class="pd-1">
            <div class="wxtip center">
                <span>扫码关注<em>1秒</em>登录</span>
            </div>
            <div class="center">
                <img id="qr" src="https://huajiakeji.com/Content/Images/qrydx.jpg" alt="" style="width:150px;height:150px;" />
            </div>
            <div style="margin-top:10px;display:flex;justify-content: center;">
                <input type="text" placeholder="输入验证码" id="txtcode" autocomplete="off" />
                <input id="btngo" type="button" onclick="chk()" value="GO" />
            </div>
            <div class="center" style="margin: 4px; font-size: .8rem; color: #f60;">
                发送“验证码”获取
                <em style="padding: 0 .5rem;">|</em>
                <span style="color: #01a05c;">15天全站免登陆</span>
            </div>
            <div id="chkinfo" class="tip"></div>
        </div>
    </div>
</div>    <script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/highlight.min.js"></script>
<script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/base.js?v=0.22"></script>
<script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/tui.js?v=0.11"></script>
<footer class="footer">
    <div class="container">
		<div class="flink mb-1">
			友情链接：
            <a href="https://www.it1352.com/" target="_blank">IT屋</a>
            <a href="https://huajiakeji.com/" target="_blank">Chrome插件</a>
            <a href="https://www.cnplugins.com/" target="_blank">谷歌浏览器插件</a>
        </div>
        <section class="copyright-section">
            <a href="https://www.it1352.com" title="IT屋-程序员软件开发技术分享社区">IT屋</a>
            ©2016-2022 <a href="http://www.beian.miit.gov.cn/" target="_blank">琼ICP备2021000895号-1</a>
            <a href="/sitemap.html" target="_blank" title="站点地图">站点地图</a>
            <a href="/Home/Tags" target="_blank" title="站点标签">站点标签</a>
            <a target="_blank" alt="sitemap" href="/sitemap.xml">SiteMap</a>
            <a href="/1155981.html" title="IT屋-免责申明"><免责申明></a>
            本站内容来源互联网,如果侵犯您的权益请联系我们删除.
        </section>
        
<!--统计代码-->
<script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?0c3a090f7b3c4ad458ac1296cb5cc779";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
</script>
<script type="text/javascript">
    (function () {
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        }
        else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>
    </div>
</footer>
</body>
</html>

AngularJS 1.5+ 组件不支持 Watchers，有什么解决办法? [英] AngularJS 1.5+ Components do not support Watchers, what is the work around?

问题描述

Writing Components without 观察者

使用ng-change指令

使用`ng-change`指令