表单结果中的动态图标

Question

我更改了一支笔以在表单结果中添加图标。 它在页面加载时有效，但当您动态添加时不起作用。 这是笔：https://codepen.io/nathel/pen/eYNZYJN 任何帮助将不胜感激

<div class="panel">
<input type="text" placeholder="Search Bookmarks" ng-model="search" />       
</div>      
<ul class="bookmarks">
<li ng-repeat="site in bookmarks | filter: search">
<a href="{{ site.url }}">
<img ng-src="{{site.favicon}}">{{site.url}}
</a>
<span class="label secondary"> {{site.category}}</span>
<i class="right icon-trash" ng-click="deleteBookmark($index)"></i> 
</li>
</ul>    
</div>    

var myApp = angular.module("myApp", ["favicon"]);
myApp.controller("appCtrl", ["$scope", "faviconFilter", function($scope, faviconFilter) {
$scope.bookmarks = [
{
//title: 'CodePen',
url: 'https://codepen.io',
category: 'Web Design',
likes: 3
}
];
$scope.increment = function ($index) {
$scope.likes++;
};
$scope.addBookmark = function () {
$scope.bookmarks.push({
title: $scope.site_name,
url: $scope.site_url,
category: $scope.site_category,
likes: 0
});
$scope.site_name = '';
$scope.site_url = '';
$scope.site_category = '';
};
$scope.bookmarks.forEach( function(bookmarks) {
bookmarks.favicon = faviconFilter(bookmarks.url);
});
$scope.deleteBookmark = function (id) {
var bookmark = $scope.bookmarks[id];
$scope.bookmarks.splice(id, 1);
};
}]);    

Answer 1

它在页面加载时有效，但当您动态添加时不起作用。

在addBookmark函数中向推送对象添加favicon属性：

$scope.addBookmark = function () {
$scope.bookmarks.push({
title: $scope.site_name,
url: $scope.site_url,
category: $scope.site_category,
likes: 0,
//IMPORTANT
favicon: faviconFilter($scope.site_url)
});
$scope.site_name = '';
$scope.site_url = '';
$scope.site_category = '';
};