Question

我正在尝试在指令

内的模板中执行.replace

dynamic_cast

我想在{{data.Title}}

上

directive('sampleComponent', function () {
return {
template: '<h2 style="border:1px solid red">{{data.Title}}</h2>'
};
})

有什么建议吗？

Answer 1

在Angular中修改模板中的变量，我们在范围内操作它们。在指令的链接功能或相关控制器中，只需调用$scope.data.Title.replace(/'/g, '"');（链接功能可能是最佳位置 - Link vs compile vs controller）。

＆＃13;

angular.module('docsSimpleDirective', [])
  .controller('Controller', ['$scope', function($scope) {

  }])
  .directive('myCustomer', function() {
    return {
      template: 'Name: {{customer.name}} Address: {{customer.address}} <a ng-click="replace()" href="#">clickme</a>',
      link: function($scope) {
        $scope.customer = {
          name: 'Naomi',
          address: '1600 Amphitheatre'
        };
        
        $scope.replace = function() {
          console.log("running");
          $scope.customer.name = $scope.customer.name.replace(/a/g, "o");
        }
      }
    };
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="docsSimpleDirective">
  <div ng-controller="Controller">
    <div my-customer></div>
  </div>
</div>

＆＃13;

Answer 2

我认为最好的方法是使用过滤器。

您可以创建过滤器，如：

angular.module('myApp', [])
.filter('myReplace', function() {
  return function(input) {
    var out = ... //your replace logic
    return out;
  };
});

然后将其应用于您的模板：

directive('sampleComponent', function () {
  return {
    template: '<h2 style="border:1px solid red">{{data.Title | myReplace}}</h2>'
  };
})

请记住在指令控制器中注入过滤器。

角度模板.replace

2 个答案: