将另一页的 css class 应用到带有 angularjs 的标题

Question

我有一个带有切换按钮的文本输入。我想 apply/remove 一个 CSS style:word-wrap: break-word; 从 page 2 到 title。我该如何进行？

第 1 页：

  <h2>Title</h2>

  <input ng-model="card.title">

  <md-button ng-model="card.title" ng-click="toggleWrap()">
     <md-icon>{{(wrapText===true) ? 'wrap_text' : 'remove'}}</md-icon>
  </md-button>

JS 1 :

  $scope.wrapText = true;
  $scope.toggleWrap = function() {
     $scope.wrapText = !$scope.wrapText;
  };

第 2 页：

<h2 ng-class="{'word-wrap': yesORno}">{{title}}</h2>

Answer 1

如果 $scope.wrapText 是您的切换值，那么，

<h2 ng-class="{'word-wrap': wrapText}">{{title}}</h2>

如果第 1 页和第 2 页有不同的控制器，那么您可以将 wrapText 保留为全局变量，例如 $rootScope，或者使用服务在控制器之间进行通信。

Answer 2

很简单。只需像这样在 $rootScope 中绑定变量，它就可以在你所有的 controllers/html:

中访问

$rootScope.wrapText = true;
$scope.toggleWrap = function() {
  $rootScope.wrapText = $rootScope.wrapText ? false : true;
};

然后你可以在html中设置：

<h2 ng-class="{'word-wrap': wrapText}">{{title}}</h2>

将另一页的 css class 应用到带有 angularjs 的标题

Apply css class from another page to title with angularjs

angularjs

angular-material