Question

我有这样的指示：

angular.module('somemodule').directive('tooltipText', function ($timeout, $compile, $document, config, $filter) {
  return {
    restrict: 'A',

    scope:{
       tooltip: '='
     },
    link: function (scope, element, attrs) {
      let tipHtml = `<div ng-class="tipClass">
                      <div class="header">
                        <span>{{ title }}</span>
                      </div>
                      <div class="body">
                        <br ng-show="showDescription && description"/>
                        <span ng-show="showDescription">{{description}}</span>
                      </div>
                      <div class="tooltip-arrow"></div> 
                    </div>`;

    scope.$watch('tooltip',(changedAttr) => {

    if (element) {
      let elm = angular.element(element)[0];
      if (elm.getAttribute('tooltip-show')) {

        if (changedAttr && elm.offsetParent != null) {
          showtooltip(element);
          elm.scrollIntoView();

        }
      } else {
        element.bind('mouseover', showtooltip);
      }
    }
  });
 showtooltip = (elem)=>{
 //do some tooltip logic and then after a timeout of say, 5secs, I do

   scope$.tooltip = false;
   //i.e i remove the tooltip and set the attribute
   // value back so that next time change can be 
   // watched by this directive. Basically it's a tooltip
   //that should last for around 5 seconds and when
   //setting the attribute on element again to true,
   // it should reappear.
   }
});

现在的问题是，在这个孤立的范围内，它与其他指令相冲突。围绕这个问题的最佳方法是什么？

Answer 1

要避免使用隔离范围，只需观察属性：

scope: false,  ̶{̶
          ̶t̶o̶o̶l̶t̶i̶p̶:̶ ̶'̶=̶'̶
      ̶}̶,̶
link: function (scope, element, attrs) {
    let tipHtml = `<div ng-class="tipClass">
                  <div class="header">
                    <span>{{ title }}</span>
                  </div>
                  <div class="body">
                    <br ng-show="showDescription && description"/>
                    <span ng-show="showDescription">{{description}}</span>
                  </div>
                  <div class="tooltip-arrow"></div> 
                </div>`;

    ̶s̶c̶o̶p̶e̶.̶$̶w̶a̶t̶c̶h̶(̶'̶t̶o̶o̶l̶t̶i̶p̶'̶,̶(̶c̶h̶a̶n̶g̶e̶d̶A̶t̶t̶r̶)̶ ̶=̶>̶ ̶{̶
    scope.$watch(attrs.tooltip,(changedAttr) => {

在每个摘要周期中，观察者会将该属性评估为Angular Expression，并使用任何新值调用listen函数。

有关详细信息，请参阅AngularJS $watch API Reference。

没关系。但我需要将更改推回到父属性。这将如何运作？所以说10秒后我需要做一些像attrs.tooltip = false;这不是像attrs那样设置的静态值。$ set确实如此。我需要实际的绑定。因为否则在那10秒之后，值仍然是真的并且工具提示不会再被触发

使用$parse service

function postLink(scope, elem, attrs) {
    var getter = $parse(attrs.tooltip);
    var setter = getter.assign;
    setter(scope,false);
};

如果属性是可分配的，则会在范围上下文中将其设置为false。

请注意，双向绑定很难说明更改了哪些数据以及何时更改。只有拥有数据的组件才能修改它。输入应该是单向的，输出应该作为回调来实现。

在没有隔离范围

1 个答案: