Question

只需点击一下按钮，我就可以更改网站的背景图片。如何使用AngularJS在CSS中更改我身体上的背景图像属性？

CSS：

body {
  background-color: #00471c;
  background-image: url(http://www.transparenttextures.com/patterns/brushed-alum.png);
  display: flex;
  justify-content: center;
  flex-direction: column;
}

HTML：

<input type="text" ng-model="newBackground" placeholder="Image URL for new background...">

<button ng-click="ng-style=body{background-image: url({{newBackground}})}" placeholder="Change background...">Change background</button>

我实际上是按钮执行一个函数，它获取与输入文本相关的图像URL，但为了这个问题，这就是我设置它的方式。

JSFiddle

如何做到这一点？

Answer 1

如果我理解了您的问题，并且我不确定，您可以使用ng-style（DelegatingAuthenticationEntryPoint）指令轻松更改与标记关联的CSS样式。标签必须位于具有ng-app指令的标签内，因此您几乎不得不将ng-app放在HTML标签上。

然后，您将使用ng-style指令控制背景图像：

<body ng-style="myChosenStyle">

在某个控制器中控制哪个，如：

$scope.myChosenStyle = 'background-image: url(' + $scope.myImageUrl + ')';

当设置$ scope.myChoseStyle var时，您必须查找表单按钮或实际控制的内容，但这并不难。

这就是你要找的东西吗？

Answer 2

通常建议您处理指令中的所有DOM更改，这就是我选择以下方法的原因。（John Papa Style Guide on GitHub - Manipulate DOM in a Directive）

试试这个（jsbin）：

JS：

angular.module('myApp', []);

angular.module('myApp')
  .controller('MyController',MyController);

MyController.$inject = ['$scope'];

function MyController($scope) {
  $scope.newBackground = '';
  // all your other code
}

angular.module('myApp')
  .directive('backgroundChanger',backgroundChanger);

function backgroundChanger() {
  var d = {
    link: link
  };

  function link(scope, el, attrs) {
    el.on('click',function() {
      var bg = attrs.backgroundChanger;

      $('body').css({
        'background-image': 'url('+bg+')'
      });
    });
  }

  return d;  
}

HTML：

<body ng-app="myApp">
  <div ng-controller="MyController">
      <input type="text" ng-model="newBackground" placeholder="Image URL for new background..." />

      <button background-changer="{{newBackground}}" placeholder="Change background...">Change background</button>
  </div>
</body>

这种方法有几个好处：

您可以重复使用该指令（理论上您可以制作任何元素，然后是＆＃34;背景转换器＆＃34;）
您将关注点（模型和信息保留在控制器中，而样式更改在指令

如何使用AngularJS中的按钮更改CSS属性？

2 个答案: