我试图弄清楚如何将AngularJS范围变量绑定到CSS语法中.我认为问题在于大括号.这是我基本上要做的事情:
<style>.css_class {background:{{ angular_variable }}; color:#ffffff;}</style>
<style>.css_rule {background:{{ "#000000" }}; color:#ffffff;}</style>
<style>.css_rule {background:{{ var | someFilter }}; color:#ffffff;}</style>
关于如何实现这一点的任何想法？谢谢!
我有以下模板:
<!--Votez pour ce concept de bar:-->
<p ng-show="enabled('http://ballentines.herokuapp.com/{{finalist.slug}}.html') === 'novote'">Not voted</p>
<!-- Vous avez voté pour ce concept de bar-->
<p ng-show="enabled('http://ballentines.herokuapp.com/{{finalist.slug}}.html') === 'thisvote'">
Voted for this concept
</p>
<!--Vous ne pouvez voter que pour un seul concept de bar -->
<p ng-show="enabled('http://ballentines.herokuapp.com/{{finalist.slug}}.html') === 'othervote'">
Voted for another concept
</p>
当我尝试运行它时,我明白了
Error: [$parse:lexerr] Lexer Error: Unterminated quote at columns 8-57 ['http://ballentines.herokuapp.com/{{finalist.slug] in expression [enabled('http://ballentines.herokuapp.com/{{finalist.slug].
http://errors.angularjs.org/1.2.11/$parse/lexerr?p0=Unterminated%20quote&p1=s%208-57%20%5B'http%3A%2F%2Fballentines.herokuapp.com%2F%7B%7Bfinalist.slug%5D&p2=enabled('http%3A%2F%2Fballentines.herokuapp.com%2F%7B%7Bfinalist.slug
我究竟做错了什么？
我试图附加一个内联CSS规则来background-image使用类似的动态变量集constructor:
<div style="background-image: url('{{backgroundImage}}');">
...
</div>
然后在我的组件中:
export class SomeComponent {
backgroundImage = '';
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.backgroundImage = 'https://unsplash.it/200/300' ; }
}
但是,当元素呈现到屏幕时,内省CSS规则将被省略.
我尝试使用Angular ng-style,但它返回"无法绑定到'ng-style',因为它不是'div'的已知属性".
我也尝试styles在我的@Component声明中设置,如本答案中所述,但这不会在我的情况下,因为我需要backgroundImage变量是动态的.