有什么办法自动化吗？我使用gulp来运行任务。

var wrap = require("gulp-wrap");

gulp.src("./src/*.js")
    .pipe(wrap('(function(){\n"use strict";\n<%= contents %>\n})();'))
    .pipe(gulp.dest("./dist"));

这将包含每个文件的内容与模板：

(function(){
"use strict";
//contents here…
})();

您还可以将模板存储在文件系统上，而不是将其嵌入到gulpfile中，并使用wrap({src：’path / to / template’})调用gulp-wrap

我有一个第三方表单解决方案，可以通过导入javascript文件将其嵌入到我的网站中。嵌入脚本的说明实际上与“复制并粘贴以下内容”类似：

<script type="text/javascript" src="https://<form.company.com>/<form_name>.js"></script>

看一下实际的javascript文件，它基本上只是一组

document.write("            <input id=\"SubmitButton2070990\""+"\n");
document.write("            class=\"fsSubmitButton\""+"\n");
document.write("            style=\"display: block;\""+"\n");
document.write("            type=\"submit\""+"\n");
document.write("            value=\"Submit Form\" />"+"\n");

现在，我尝试了几件事…我有一个带有模板URL的指令，该指令命中包含该脚本的简单部分。看起来像这样：

指示：

angular.directive('feedbackForm',function() {
return {
            restrict: 'A',templateUrl: '/static/form.html'
        };
)

form.html

<div>
<h2>testing form</h2>

<script type="text/javascript" src="https://<form.company.com>/<form_name>.js"></script></div>
</div>

发生的一切只是呈现了html，但脚本的内容却没有…

我尝试了一个$http请求，该请求如上所述从该第三方的链接获取脚本的内容，并尝试执行该请求。就像是

$http.get('https://<form.company.com>/<form_name>.js')
    .then(function(response){
        var formScript = new Function(response.data);
        formScript();
    })

但是，我的浏览器中的“网络”标签显示，当请求以200响应代码发送时，响应没有内容，为0字节，依此类推。

基本上，我不知道自己在做什么错…

我实际上有可能这样做吗？我遇到了一些跨域脚本类型的事情吗？

<a ng-href="{{getBookmarklet()}}">Bookmarklet</a>

function MyCtrl($scope) {
  $scope.getBookmarklet = function() {
     return 'javascript:alert(1)';
  }
}

function MyCtrl($scope,$sce) {
  $scope.getBookmarklet = function() {
     return $sce.trustAsUrl('javascript:alert(1)');
  }
}

解决方法

function MyCtrl($scope,$sce) {
  $scope.getBookmarklet = function() {
    return $sce.trustAsHtml('<a href="javascript:alert(1)">Bookmarklet</a>');
  }
}

<ng-bind-html ng-bind-html="::getBookmarklet()"></ng-bind-html>

也就是说，我试图实现Bootstrap 3的navbar collapse模块，如下所示：

<divrole="navigation">
  <div>
    <div>
      <button type="button"data-toggle="collapse" data-target=".navbar-collapse">
        <span>Toggle navigation</span>
        <span></span>
        <span></span>
        <span></span>
      </button>
      <ahref="#">Project name test</a>
    </div>
    <div>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

这是直接从Bootstrap网站，它工作正常时，在自己的.html页面。

问题是当我把它插入一个UI路由器视图。折叠动作不再工作 – 我猜测，因为“数据目标”功能无法找到其目标。

如何使用Bootstrap 3与Angular UI？ Angular UI Bootstrap包没有导航栏模块。

下面的答案是好的。这是一个参考URL Twitter Boostrap Navbar with Angular JS – Collapse not functioning。

<navrole="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div>
      <button type="button"ng-click="navbarCollapsed = !navbarCollapsed">
        <span>Toggle navigation</span>
        <span></span>
        <span></span>
        <span></span>
      </button>
      <ahref="#">
        <!-- your branding here -->
      </a>
    </div>

    <!-- Collect the nav links,forms,and other content for toggling -->
    <divcollapse="navbarCollapsed">
      <!-- your normal collapsable content here -->
    </div>
</nav>

在控制器中设置初始值：

$scope.navbarCollapsed = true;

编辑：

新版本的ui-bootstrap prefix all compontents.相应地调整您的代码，例如。 collapse – > uib-collapse。

不过这是交易.

我有一个ng-if.在那个ng-if中,我有我称之为遗留函数的JavaScript.

<div ng-if="status=='yes'">
    <div id="legacyId">
        I am a legacy div!
    </div>
    <script type="text/javascript">
        $('#legacyId').legacyFunction()
    </script>
</div>

看起来这个JavaScript在页面加载时被调用.虽然我在jQuery之后加载了角度,但似乎angular删除了ng-if控制下的部分,因此#legacyId上的jQuery函数失败了.

有任何想法吗？谢谢！

编辑注释：我导入jQuery和在我的HTML文档顶部扩展jQuery的遗留代码. Angular加载在文档的底部.

编辑注释2：我也尝试了< div ng-init =“$('#legacyId').legacyFunction()”>< / div>,但是我收到错误,错误：[$rootScope：inprog ] $申请已在进行中.

在HTML中：

<div ng-if="status=='yes'">
    <div legacy-directive>
        I am a legacy div!
    </div>
</div>

在我的应用代码中：

app.directive('legacyDirective',function() {
   return {
        link: function(scope,element,attrs) {
            $(element).legacyFunction(scope.$eval(attrs.legacyDirective));
        }
   }
});

由于$(元素).legacyFunction(范围.$eval(attrs.legacyDirective));,看起来我也可以将参数传递给legacyFunction;例如< div legacy-directive ='{myParameter：true}>

谢谢所有回答的人！你让我走上正轨.