Question

所有

我是AngularJS指令模板的新手，现在有一件事让我感到困惑的是如何在指令模板中获取由ng-if决定的DOM元素。

例如：

<div ng-if="show">Show Content</div>

模板testpostlink.html是：

public class HttpRequestCordinator : ReceiveActor
{
    private Dictionary<string, IActorRef> hostDownloader; 

    public HttpRequestCordinator()
    {
        hostDownloader = new Dictionary<string, IActorRef>();

        this.Receive<HttpRequestMessage>(r =>
        {
            this.OnHttpRequesetMessage(r);
        });
    }

    private void OnHttpRequesetMessage(HttpRequestMessage message)
    {
        var host = message.Address.Host.ToLower();
        if (!hostDownloader.ContainsKey(host))
        {
            IActorRef child = Context.ActorOf(Props.Create(() => new HttpRequestActor()).WithRouter(new RoundRobinPool(1, new DefaultResizer(0, 10))));
            hostDownloader.Add(host, child);
        }
        hostDownloader[host].Tell(message, Sender);
    }
}
    public class HttpRequestActor : ReceiveActor
    {
        public HttpRequestActor()
        {
            Receive<Messages.HttpRequestMessage>(async r =>
            {
                try
                {
                    CancellationTokenSource cancellationToken = new CancellationTokenSource();
                    using (var handler = this.GetHandler())
                    {
                        using (HttpClient client = new HttpClient(handler))
                        {
                            AddDefaultHeadersToClient(client);
                            cancellationToken.CancelAfter(r.TimeOut);
                            var result = await client.SendAsync(r.Message, cancellationToken.Token);
                            Sender.Tell(result);
                        }
                    }
                }
                catch (Exception exp)
                {
                    Sender.Tell(new HttpRequsetFailed(r));
                }
            });
        }

        private HttpClientHandler GetHandler()
        {
            return new HttpClientHandler()
            {
                UseCookies = false,
                AutomaticDecompression = DecompressionMethods.GZip | DecompressionMethods.Deflate
            };
        }

        private void AddDefaultHeadersToClient(HttpClient client)
        {
            client.DefaultRequestHeaders.Add("Accept", "*/*");
            client.DefaultRequestHeaders.Add("Accept-Encoding", "gzip, deflate");
            client.DefaultRequestHeaders.Add("Accept-Language", "da-DK,da;q=0.8,en-US;q=0.6,en;q=0.4");
            client.DefaultRequestHeaders.Add("User-Agent", "Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.115 Safari/537.36");
            client.DefaultRequestHeaders.Add("AcceptCharset", "utf-8");
        }
    }

我想要做的是获取这个div元素并调整样式。但是在post函数中，仍然没有生成该元素。

有人可以帮忙吗？

由于

Answer 1

你做错的第一件事是你没有传递一个show变量，所以ng-if没有显示。其次，使用post link函数为元素添加样式。

http://plnkr.co/edit/PqXg6e?p=preview

<!-- pass in show variable -->
<div dir show="showFromCtrl"></div>

app.directive("dir", function($compile) {
  return {
    restrict:"AE",
    // needed to pass in show variable
    scope: { show: "=" },
    templateUrl: 'testpostlink.html',
    compile: function compile(tElement, tAttrs, transclude) {
      return {
        post: function postLink(scope, iElement, iAttrs, controller) {
          // access element and add styles in post link fn
          iElement.css('color', 'red');
        }
      }
    }
  }
});

Answer 2

虽然有点烦人，但这是可能的。基本上，您需要在范围内添加$ watch以进行值更改，然后每次都重置el。

app.directive("dir", function(){
    return {
        restrict:"AE",
        scope: {
            ngIf: "=" //add a two way binding so we can watch the ngIf
        },
        controller: function(){},
        templateUrl: "templates/testpostlink.html",
        compile: function(){
            return {
                pre: function(){
                },
                post:function(scope, EL, attrs){
                    // El should be [comment] when ngIf is false

                    var realEl; // store our real element. This will be destroyed and recreated every time ngIf changes

                    scope.$watch('ngIf', function(val){
                        if (val) {
                            //store our new real element
                            realEl = El.next();
                        }
                    });
                }
            };
        }// end of compile
    };
});

如何从ng-if决定的模板访问DOM元素

2 个答案: