Angular Scouts: $watch() and $observe()

Time:2021-9-27
Because I didn't know how to use these two methods, I spent some time to understand them; Write down something. If you forget when, it's easier to find it.
  • First, let’s talk about their two usage scenarios:

    • $watch()

      • $watch()yesangularupperscopeObject.

      • In any controller, but not recommended incontrollerUsed in$watch(); Because it makestestandmaintainIt becomes very difficult.

      • In any instruction, you canlinkFunction, which is a recommended way.

      • He can not only monitorangular expressionChanges can also be detectedfunction(){}Function changes, monitoringangular expressionIt will be used when$parsetakeangular expressionResolve to a function that willangularEach ofDirty value checkCalled in a loop.

    • $observe()

      • $observe()yesangularInstructionlinkIn functionInstance propertiesNamely(iAttr)A method of.

      • It can only be used in instructions, and it is also used in the of instructionslinkUsed in function.

      • It can only monitorangular expressionChanges, monitoring methods and above$watch()monitorangular expressionIn the same way.

  • Then let’s talk about the difference between them:

    • staycontrollerin

      • Because incontrollerIs not recommended$watch()Yes, so some of our later discussions are mainly aboutinstructionsDiscussed in.

    • Directive (do not use isolated scopes)

      • In a scope that does not use isolationinstructionsIn,$watch()Only those without interpolation markers can be monitoredangular expressionFor example, in<div attr1='expr' attr2='{{expr}}'></div>In, you can only monitorattr1='expr'Mediumattr1, monitoringattr2Only one can be obtainedundefined, because it exists{{}}Interpolation symbol.

      • In a scope that does not use isolationinstructionsIn,$observe()Only those with interpolation markers can be monitoredangular expressionFor example, in<div attr1='expr' attr2='{{expr}}'></div>In, you can only monitorattr2='{{expr}}'Mediumattr2, monitoringattr1You will only get an immutable stringexpr

    • Directive (use isolated scope)

      • When using isolated scopesInstruction$watch()You can also monitor with interpolated markersangular expression; Because of the use of@perhaps=Prefix identifiers, which have been implemented for usinterpolation, so it can be used like this.

  • Let’s take an example:

  • some suggestions

    • When monitoring the attribute value of an element, you can useangular-styleguideHowever, there will be some problems. When I first wrote the example, I encountered some errors; For example, I used it at firstcontrollerAsGrammar is usedMyController as vmAnd the variables in some monitored attributes are usedvm.propIn this way, there are some mistakes, so I’m writing thisdemoSome places didn’t follow at the timeangular-styleguide

    • About what appears in the resultsundefinedBecause the priority of the instruction is higher than that of the controller, it is used in the instruction$watch()If the monitored expression contains{{}}Then there will beundefined, because the variables in the interpolation string have not been parsed at the time of monitoring. But it is possible in instructions that use isolation scopes because@and=It has helped us to realize the parsing of variables.

  • References