javascript - AngularJS 修改指令模板中的范围

Question

我有一个 Angular Directive(指令):

app.directive('myStyle', function($location) {
  return {
    scope: {
      myCSSFile: "="
    },
    //template: '<link href="style.css" rel="stylesheet" />',
    template: '<link href="{{ myCSSFile }}.css" rel="stylesheet" />',
    link: function(scope,el, attr) {
      var absUrl = $location.absUrl();
      console.log(absUrl);

      if (absUrl == 'http://run.plnkr.co/KDRUOzkRgvgCzdzy/') {
        console.log("Found");
        scope.myCSSFile = 'style';
      }
      else {
        console.log("Not found");
        scope.myCSSFile = 'style2';
      }      
    }
  };
});

如何根据我的 link 中的函数将值绑定(bind)到模板中的 {{ myCSSFile }}？

Plunkr:http://plnkr.co/edit/I6om40ZfRZbETwsbl3MO?p=preview

Answer 1

您不能对具有未定义值的 myCSSFile 使用两种方式绑定(bind)。因此，如果您想要隔离范围，可以将其更改为与 @ 绑定(bind)，或创建一个新范围:

scope: true, // plunker1
scope: { // plunker2
    myCSSFile = '@'
},

Punker1 , Plunker2