草庐IT

javascript - 可以在 AngularJs 中设置 base 标签的 href 属性吗?

coder 2025-01-21 原文

我想根据常量值设置 base 标签的 href 属性值。为此,我在 head 元素中声明了 base 属性,如下所示:

<head>
  <base ng-href="{{baseUrl}}">
</head>

然后我使用以下代码片段设置了 baseUrl 值:

app.run(["$rootScope","env", function($rootScope, env){   
    $rootScope.baseUrl = env.baseUrl;
}]);

其中 env 是 Angular 常量。

locationProvider 是这样配置的:

.config(function ($locationProvider) {
 $locationProvider.html5Mode(true);
})

当我运行它时,我看到正确设置的值:

<base ng-href="/" href="/">

但是在控制台中我得到这个错误:

Error: [$location:nobase] $location in HTML5 mode requires a <base> tag to be present!
http://errors.angularjs.org/1.3.14/$location/nobase
    at REGEX_STRING_REGEXP (angular.js:63)
    at $LocationProvider.$get (angular.js:11293)
    at Object.invoke (angular.js:4185)
    at angular.js:4003
    at getService (angular.js:4144)
    at Object.invoke (angular.js:4176)
    at angular.js:4003
    at getService (angular.js:4144)
    at Object.invoke (angular.js:4176)
    at angular.js:6485

如果我不使用 ngHref 直接设置 href 属性:

<base href="{{baseUrl}}">

我收到这个错误:

Error: Failed to execute 'replaceState' on 'History': A history state object with URL 'http://items/' cannot be created in a document with origin 'http://localhost:9000'.
 at Error (native)
 at Browser.self.url (http://localhost:9000/bower_components/angular/angular.js:5044:56)
 at setBrowserUrlWithFallback (http://localhost:9000/bower_components/angular/angular.js:11313:18)
 at http://localhost:9000/bower_components/angular/angular.js:11435:15
 at Scope.$get.Scope.$eval (http://localhost:9000/bower_components/angular/angular.js:14401:28)
 at Scope.$get.Scope.$digest (http://localhost:9000/bower_components/angular/angular.js:14217:31)
 at Scope.$get.Scope.$apply (http://localhost:9000/bower_components/angular/angular.js:14506:24)
 at bootstrapApply (http://localhost:9000/bower_components/angular/angular.js:1448:15)
 at Object.invoke (http://localhost:9000/bower_components/angular/angular.js:4185:17)
 at doBootstrap (http://localhost:9000/bower_components/angular/angular.js:1446:14)

其中items是默认路由路径:

 .otherwise({
    redirectTo: 'items'
  });

最佳答案

通过 createElement 在 JavaScript 中设置 base href,然后进行手动引导:

    /* Create base element */
    var base = document.createElement('base');
    /* Create script element */
    var script = document.createElement('script');
    /* Set base href */
    base.href = "http://example.com";
    /* Set script src */
    script.src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js";
    /* Append base tag to body */
    document.getElementsByTagName("body")[0].appendChild(base);
    /* Append script tag to head */
    document.getElementsByTagName("head")[0].appendChild(script);
    
    function html5Mode ($locationProvider) 
      {
      $locationProvider.html5Mode(true);
      };

    function dothis()
      {
      //template string
      var html = "<div>ID: {{$id}} Phase: {{$$phase}} Destroyed: {{$$destroyed}} listeners: {{$$listeners}} root: {{$root}}</div>";
      //template object
      var template = angular.element(html);
      //template transformer
      var compiler = angular.injector(["ng"]).get("$compile");
      //template result
      var linker = compiler(template);
      //scope object
      var scope = angular.injector(["ng"]).get("$rootScope");
      //scope binding
      var result = linker(scope)[0];
    
      /* Append result to body */
      document.body.appendChild(result);
    
      /* Render */
      angular.bootstrap(document, ['ng', html5Mode]);
      }
    
    script.onload = dothis;

引用资料

关于javascript - 可以在 AngularJs 中设置 base 标签的 href 属性吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30049927/

有关javascript - 可以在 AngularJs 中设置 base 标签的 href 属性吗?的更多相关文章

  1. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法? - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  2. ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby​​ 中生成它们? - 2

    我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%

  3. ruby - 使用 Vim Rails,您可以创建一个新的迁移文件并一次性打开它吗? - 2

    使用带有Rails插件的vim,您可以创建一个迁移文件,然后一次性打开该文件吗?textmate也可以这样吗? 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件,这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails,您可以创建一个新的迁移文件并一次性打开它吗?,我们在StackOverflow上找到一个类似的问题: https://sta

  4. ruby-on-rails - 如果为空或不验证数值,则使属性默认为 0 - 2

    我希望我的UserPrice模型的属性在它们为空或不验证数值时默认为0。这些属性是tax_rate、shipping_cost和price。classCreateUserPrices8,:scale=>2t.decimal:tax_rate,:precision=>8,:scale=>2t.decimal:shipping_cost,:precision=>8,:scale=>2endendend起初,我将所有3列的:default=>0放在表格中,但我不想要这样,因为它已经填充了字段,我想使用占位符。这是我的UserPrice模型:classUserPrice回答before_val

  5. ruby - 我可以使用 Ruby 从 CSV 中删除列吗? - 2

    查看Ruby的CSV库的文档,我非常确定这是可能且简单的。我只需要使用Ruby删除CSV文件的前三列,但我没有成功运行它。 最佳答案 csv_table=CSV.read(file_path_in,:headers=>true)csv_table.delete("header_name")csv_table.to_csv#=>ThenewCSVinstringformat检查CSV::Table文档:http://ruby-doc.org/stdlib-1.9.2/libdoc/csv/rdoc/CSV/Table.html

  6. ruby-on-rails - 在混合/模块中覆盖模型的属性访问器 - 2

    我有一个包含模块的模型。我想在模块中覆盖模型的访问器方法。例如:classBlah这显然行不通。有什么想法可以实现吗? 最佳答案 您的代码看起来是正确的。我们正在毫无困难地使用这个确切的模式。如果我没记错的话,Rails使用#method_missing作为属性setter,因此您的模块将优先,阻止ActiveRecord的setter。如果您正在使用ActiveSupport::Concern(参见thisblogpost),那么您的实例方法需要进入一个特殊的模块:classBlah

  7. ruby - 在院子里用@param 标签警告 - 2

    我试图使用yard记录一些Ruby代码,尽管我所做的正是所描述的here或here#@param[Integer]thenumberoftrials(>=0)#@param[Float]successprobabilityineachtrialdefinitialize(n,p)#initialize...end虽然我仍然得到这个奇怪的错误@paramtaghasunknownparametername:the@paramtaghasunknownparametername:success然后生成的html看起来很奇怪。我称yard为:$yarddoc-mmarkdown我做错了什么?

  8. ruby - 多个属性的 update_column 方法 - 2

    我有一个具有一些属性的模型:attr1、attr2和attr3。我需要在不执行回调和验证的情况下更新此属性。我找到了update_column方法,但我想同时更新三个属性。我需要这样的东西:update_columns({attr1:val1,attr2:val2,attr3:val3})代替update_column(attr1,val1)update_column(attr2,val2)update_column(attr3,val3) 最佳答案 您可以使用update_columns(attr1:val1,attr2:val2

  9. ruby - 我可以使用 aws-sdk-ruby 在 AWS S3 上使用事务性文件删除/上传吗? - 2

    我发现ActiveRecord::Base.transaction在复杂方法中非常有效。我想知道是否可以在如下事务中从AWSS3上传/删除文件:S3Object.transactiondo#writeintofiles#raiseanexceptionend引发异常后,每个操作都应在S3上回滚。S3Object这可能吗?? 最佳答案 虽然S3API具有批量删除功能,但它不支持事务,因为每个删除操作都可以独立于其他操作成功/失败。该API不提供任何批量上传功能(通过PUT或POST),因此每个上传操作都是通过一个独立的API调用完成的

  10. ruby - Nokogiri 剥离所有属性 - 2

    我有这个html标记:我想得到这个:我如何使用Nokogiri做到这一点? 最佳答案 require'nokogiri'doc=Nokogiri::HTML('')您可以通过xpath删除所有属性:doc.xpath('//@*').remove或者,如果您需要做一些更复杂的事情,有时使用以下方法遍历所有元素会更容易:doc.traversedo|node|node.keys.eachdo|attribute|node.deleteattributeendend 关于ruby-Nokog

随机推荐