Question

我有一个角度表，以这种方式显示：

<table class="row">
    <tr ng-repeat="x in myWelcome | filter :search">
        <td>{{$index}}</td>
        <td>{{x._id}}</td>
        <td>{{x.email}}</td>
        <td ng-bold-number>{{x.phone}}</td>
        <td>{{x.latitude}}</td>
        <td>{{x.longitude}}</td>
        <td><input type="button" value="Remove"  ng-click="removeRow(x._id)"/></td>
    </tr>
</table>

电话栏显示如下：+1（210）22158765。我想创建一个指令“ng-bold-number”，以便括号内的数字（这里是210）将以粗体显示，如+1（ 210 ）22158765 所以我在Angular中制定了这个指令：

app.directive('ngBoldNumber', [function() {
    return {
        restrict: 'A',
        link: function($scope, iElement, iAttrs) {
            var x = $scope.x.phone.substring(0, $scope.x.phone.indexOf('(')+1)
            var y = $scope.x.phone.substring($scope.x.phone.indexOf('(')+1, $scope.x.phone.indexOf(')')+1)

            $scope.x.phone=x+y;

        }
    };
}])

我能够减少字符串，但我没有找到以粗体显示它的方法。你能帮帮我吗？

Answer 1

假设你想要一个指令，你可以这样做：check my plunker here

指令函数本身如下所示：

[PROCEDURE SEND_MAIL(    
 P_FROM    IN VARCHAR ,  
 P_TO      IN VARCHAR ,  
 P_CC      IN VARCHAR ,    
 P_PASSWORD IN VARCHAR2 ,  
 P_SUBJ     IN VARCHAR,  
 P_MSG     IN VARCHAR2 
)

IS
 conn    utl_smtp.connection ;  
 reply   utl_smtp.reply;  
 err_no number;  
BEGIN  
conn:=utl_smtp.open_connection(host => 'smtp.office365.com',port => 587,    
 wallet_path =>     'file:D:\app\oracle\product\11.2.0\dbhome_1\BIN\owm\wallets\oracle',    
 wallet_password => 'Iectest123',secure_connection_before_smtp => true);    
 exception    
    when others then    
       messagebox(SQLCODE||','||SQLERRM);    
 end ;    
 utl_smtp.helo(conn, lv_mailhost);    
 utl_smtp.STARTTLS(conn);    
 utl_smtp.command( conn, utl_raw.cast_to_varchar2    
 ( utl_encode.base64_encode( utl_raw.cast_to_raw(p_from))));    
 utl_smtp_SEC.command( conn, utl_raw.cast_to_varchar2    
 ( utl_encode.base64_encode( utl_raw.cast_to_raw(P_PASSWORD ))));    
 utl_smtp.mail(conn, p_from);    
 utl_smtp.rcpt(conn, p_to);    
 utl_smtp.open_data(conn);    
 utl_smtp.write_data(conn,'MIME-Version: 1.0'|| chr(13)||chr(10) );    
 utl_smtp_SEC.write_data(conn, 'Content-Type: text/plain; charset=iso-8859-6' ||     --iso-8859-6    
 chr(13)||chr(10)); --iso-8859-6    
 utl_smtp.write_data(conn, 'Content-Transfer-Encoding: Cp1256' ||--    ARABIC.AR8MSWIN1256    
 chr(13)||chr(10)); --8bit    

 utl_smtp.write_data(conn, 'From:' ||p_from || chr(13)||chr(10));    
 utl_smtp.write_data(conn, 'To:' ||p_to || chr(13)||chr(10));    
 utl_smtp.write_data(conn, 'Cc:' ||p_cc || chr(13)||chr(10));     
 utl_smtp.write_data(conn, 'Reply-To:' ||p_from || chr(13)||chr(10));    
 utl_smtp.write_data(conn, 'Subject:' ||p_subj|| chr(13)||chr(10));    
 utl_smtp.write_data(conn, chr(13)||chr(10));    
 ---------    
 utl_smtp.write_raw_data(conn, utl_raw.cast_to_raw(p_msg));    
 utl_smtp.close_data(conn);    
 utl_smtp.quit(conn);    

messagebox('send Sucessful');    
EXCEPTION WHEN OTHERS THEN     
      msgbox(sqlerrm);    

END;][1]

基本上，我添加的是一个模板，显示你所做的削减。我不得不再做一次切割（结束后的最后一部分'）'）。您必须设置replace：false，因此您的模板将附加到指令元素中。

然后我有一个孤立的范围，包含需要剪切的文本，电话号码。我确实在我的plunker中简化了一些示例。

html如下所示：

function boldNumber(){

    return {
      restrict:"A",
      template:"{{pre}} <b>{{bold}}</b> {{post}} ",
      replace:false,
      scope:{
        inBold:"@"
      },
      link: function(scope, element, attr){
        console.log(scope.inBold);
        scope.pre = scope.inBold.substring(0, scope.inBold.indexOf('(')+1);
        scope.bold = scope.inBold.substring(scope.inBold.indexOf('(')+1, scope.inBold.indexOf(')')+1);
        scope.post = scope.inBold.substring(scope.inBold.indexOf(')')+1);


      }
    };

如您所见，in-bold属性包含指令函数中隔离范围的值。如果您需要更多信息，或者某些事情不明确，请询问。

编辑：关于inBold的部分：“@”

在你的指令函数中，当你添加选项'scope'时，你创建一个只计算指令的范围。指令本身不再能够达到控制器的范围。这就是为什么它被称为“孤立范围”。存在是为了保护您的利益。在大型单页应用程序中，如果您没有隔离范围，则可能会意外地从您不想要的控制器更改范围变量。

但是，我们确实希望能够将变量从控制器传递给指令，对吗？因此，有可能构建“边界控制”，用于将变量从控制器传递到指令。在你的html中，你传递了一个名为：in-bold的额外属性。它有价值。这是你的'边境管制'。名称'in-bold'被转换为驼峰案例（inBold）以供在javascript中使用。

所以它基本上意味着指令的孤立范围现在有一个名为inBold的变量。此变量的值通过属性“in-bold”从控制器传递给指令。重要的是它们具有“相同”的名称。对于我们人类而言，粗体与inBold不同，但对于角度而言它是。用破折号（ - ）连接的angular-html中的所有内容都在javascript中转换为camel case。所以对于angular in-bold（html）= inBold（javascript）。在指令中，您现在可以将传递的变量作为scope.inBold或{{inBold}}来访问。

那么“@”是关于什么的？好吧，“@”告诉指令我们正在处理一个String值，它只是单一的。这意味着如果我们在指令中更改inBold的值，则控件中将不会显示更改！这个很重要。如果您想要双向绑定，则需要使用以下内容：

<table class="row">
                    <tr>
                        <td bold-number in-bold="{{x.phone}}">tryout</td>
                        <td><input type="button" value="Remove"  ng-click="removeRow(x._id)"/></td>
                    </tr>
                </table>

我希望你有点清楚......

Answer 2

这是工作解决方案的一部分，用于演示如何使其成为大胆的风格。现在您可以格式化数字的其余部分

angular.module("myApp", [])
  .controller('myController', ['$scope', '$log',
    function($scope, $log) {
      $scope.phone = '+1(210)22158765';
      $scope.isBold = false;
      $scope.countryCode = null;
    }
  ])

.directive('ngBoldNumber', [
  function() {
    return {
      restrict: 'A',
      template: '<span  ng-class="{bold: isBold}">{{countryCode}}</span><span>{{phone}}</span>',
      link: function($scope, iElement, iAttrs) {
        //debugger;
        var x = $scope.phone.substring(0, $scope.phone.indexOf('(') + 1);
        var y = $scope.phone.substring($scope.phone.indexOf('(') + 1, $scope.phone.indexOf(')') + 1);
        if (x && y) {
          $scope.countryCode = x + y;
          $scope.isBold = true;
        }
      }
    };
  }
]);

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
  <script src="script.js"></script>
  <style>
    .bold {
      font-weight: bold;
    }
  </style>
</head>


<body ng-app="myApp" ng-controller="myController">
  <table class="row">
    <tr>
      <td ng-bold-number>{{phone}}</td>
    </tr>
  </table>
</body>

</html>

Angular.js指令以粗体显示一段字符串

2 个答案: