xieqian423/books

books's Issues

元素同事设置diapaly：table-cell与float时，vertical-align无效

webstorm快捷键

http://blog.csdn.net/haoshidai/article/details/50810980

angular ng-bind-html无法解析数字

使用ng-bind-html 指令，能够对html代码的标签转译，但是输入为数字时，所得结果为空，需要将数字转换成字符串

ng-bind-html 需配合 $sce.trustAsHtml使用

<div ng-repeat="article in articles">
        <div class="panel-heading">
            <h4><b>{{article.title}}</b></h4>
        </div>
        <div class="panel-body">
            <article id="word-display" ng-bind-html="article.content | trustHtml">
            </article>
        </div>
    </div>
javascript：
success(function (data) {
        $scope.articles = data;  
});
myApp.filter('trustHtml', function ($sce) {
        return function (input) {
            input = isNaN(input) ? input : (input + "");
		return $sce.trustAsHtml(input);
        }
    });

angular解析用户自定义html标签并绑定数据

使用一个directive封装，参考这里Angular + $compile + ng-bind-html /

//html
<div class="alert-message">
  <div show-content template="{{ content }}"></div>
</div>

//controller
$scope.sayHello = function(string) {
  $log.info(string);
};
$scope.content = '<a ng-click="sayHello(\'Hello\')">Say Hello</a>';

//directive
.directive('showContent', ['$compile', function ($compile) {
  return {
    scope: true,
    link: function($scope, $element, $attr) {
      var el;
      $attrs.$observe('template', function (tpl) {
        el = $compile('<div>'+tpl+'</div>')($scope);
        $element.html("");
        $element.append(el);
      });
    }
  };
}]);

参考 Insert an angular js template string inside an element

多个inline-block对齐形式怪异

出现这个问题的原因归根结底就是inline-block的特性，两个inline-block之间的布局类似两个行内元素，但是可以设置width，height，上下margin。。。类似行内元素布局，两个inline-block元素并排时，没有写明vertical-align时，默认是以baseline对齐的，而inlineblock元素的baseline在哪里就要分有文字和没文字的情况，没有文字的情况baseline就是“margin-bottom的那条线”！！！！！有文字的情况baseline就是“最后一行文本的baseline”！！！！理解以上两点（对齐方式和baseline在哪里），你就能知道为什么会出现这么奇怪的布局。最后，在css布局格式化里面，行内格式化是最最最难以理解的，把这个学通了，感觉基本的格式化布局都是小儿科

angular