Angularjs:Javascript函数中没有指令内容

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Angularjs:Javascript函数中没有指令内容相关的知识,希望对你有一定的参考价值。

我有一个divng-click。当我点击那个div时,它会调用一个从指令中获取脚本内容的函数,然后将其附加到另一个div并访问脚本的内容。但是当我检索指令的内容时,我得到的是指令名而不是内容。我想获得内容。

我打电话的功能:

$scope.someFunction = function(){
  var appendhtml = $compile("<my-custom-directive></my-custom-directive>")($scope);
  $("#someId").append(appendHtml)
  //But when i append I am seeing as <my-custom-directive></my-custom-directive> in html not the actual content

  $(""#someId"").find('script')
}

指示:

app.directive('myCustomDirective', function ($compile) {
  return {
    restrict: 'E',
    templateUrl: '/somecontent.html',
    replace: true,
    link: function ($scope, elem, attr, ctrl) {}
  };
});

Somecontent.html

<script type="text/template">
  <div class="arrow" style="left: 50%;"></div>
    some elements here
  </div>
</script>

我打电话给的HTML:

<div ng-click="someFunction()">
  <div id="someId">
    <my-custom-directive></my-custom-directive> 
    //But Here I am seeing this, when calling 
    $(appendHtml).find('script') in my javascript function, after Javasciprt function call is done, It works fine. But i want to see actual content here when calling $(""#someId"").find('script')
  <div>
</div>
答案

这不是一个好习惯。

您可以使用ng-if和绑定,如下所示:

HTML

<div ng-click="someFunction()">
  <div id="someId">
    <div ng-if="$scope.isVisible">
          <my-custom-directive></my-custom-directive> 
    </div>
    //But Here I am seeing this, when calling 
    $(appendHtml).find('script') in my javascript function, after Javasciprt function call is done, It works fine. But i want to see actual content here when calling $(""#someId"").find('script')
  <div>
</div>

控制器:

 $scope.isVisible = false;

$scope.someFunction = function(){
   $scope.isVisible = true;
}

您还可以将隔离范围参数传递给您的指令并检查指令模板中的参数

另一答案

您可能只是没有使用jQuery或jqLit​​e来正确选择元素。

您的someFunction可能需要看起来更像这样:

vm.someFunction = function () {
  var appendHtml = $compile('<my-custom-directive></my-custom-directive')($scope);
  angular.element(document).find('some-id-element').append(appendHtml);
};

我把this plunk放在一起,我认为可能会实现你想要做的事情。

这接近你的目标吗?

以上是关于Angularjs:Javascript函数中没有指令内容的主要内容,如果未能解决你的问题,请参考以下文章

从 index.html javascript 调用 angularJS 控制器函数

使用 jquery/javascript 调用 angularjs 函数

使用 JavaScript 在 AngularJS Bootstrap UI 中调用模式窗口

使用 AngularJS 立即返回一个已解决的承诺

angularJs学习笔记

AngularJS 控制器