如何显示模板时，范围变更[角指令] [英] How to display template when scope change [Angular directive]

问题描述

下面是我的指令：

 函数ajaxMessageData（）
{
    VAR ajaxMessage = {
        链接：链接，
        限制：EA，
        模板：成功，
        范围： {
            成功：'='
        }
    };    返回ajaxMessage;    功能链接（范围，榆树，ATTRS）
    {            的console.log（scope.success）;
            范围。$腕表（attrs.success，功能（newValue）以{
                的console.log（变更为+为newValue）;
            }）;    }
}
 

和在HTML：

 ＆LT; Ajax的消息成功=vm.message＆GT;＆LT; / AJAX消息＆GT;
 

问题是与内部指令范围我从 vm.message 初始消息（这是我的控制器VAR），但是当我 vm.message 更改指令，它没有末检测......我也想模板只显示如果我从 vm.success 成功消息。任何人都知道如何做到这一点？
谢谢

解决方案

1. 您正在传递了错误的参数传递给 $观看。它应该是一个前pression - 不是 ATTRS 对象的值


2. 您可以使用 NG-如果指令来控制的可见性。


3. 不知道这是否意，但成功的模板，也许需要一个卷曲的绑定：{{成功}}

示例：

  myApp.directive（'ajaxMessage'，函数（）{  返回{
    限制：EA，
    范围： {
      成功：'='
    }，    //使用任何你在模板一样 - 注意NG-如果只会
    //渲染元素时的成功属性有值
    //还要注意{{结合}}    模板：＆LT; D​​IV NG-IF = \\成功\\级= \\警报警报的信息\\＆GT; {{成功}}＆LT; / DIV＆gt;中，    链接：功能（$范围，$元，$ ATTRS）{      //看$ scope.success（不是$ attrs.success）      $范围。$腕表（'成功'，功能（价值）{
        的console.log（'成功，现在是：'，值）;
      }）;
    }
  };}）;
 

...或者在行动中看到这个 plunker 。

Here is my directive:

function ajaxMessageData()
{
    var ajaxMessage = {
        link: link,
        restrict: "EA",
        template: "success",
        scope: {
            success: '='
        }
    };

    return ajaxMessage;

    function link(scope, elm, attrs)
    {

            console.log(scope.success);
            scope.$watch(attrs.success, function (newValue) {
                console.log("Changed to " + newValue);
            });

    }
}

and in html:

<ajax-message success="vm.message"></ajax-message>

Problem is with scope inside directive I get initial message from vm.message (it is my controller var) but when my vm.message change it not detectd in directive... Also I would like to template show only if I get success message from vm.success. Anyone know how to accomplish this? Thanks

解决方案

1. You're passing the wrong argument to the $watch. It should be an expression -- not the value of the attrs object.
2. You can use the ng-if directive to control visibility.
3. Not sure if this is intended, but the success template maybe needs a curly binding: "{{ success }}"

Example:

myApp.directive('ajaxMessage', function() {

  return {
    restrict: 'EA',
    scope: {
      success: '='
    },

    // Use anything you like in the template -- note the ng-if will only
    // render the element when the success property has a value
    // Also note the {{ binding }}

    template: "<div ng-if=\"success\" class=\"alert alert-info\">{{ success }}</div>",

    link: function($scope, $element, $attrs) {

      // Watching $scope.success (not the $attrs.success)

      $scope.$watch('success', function(value) {
        console.log('Success is now:', value);  
      });
    }
  };

});

... or see this plunker in action.

这篇关于如何显示模板时，范围变更[角指令]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！