1

我正在构建一个简单的 html 广告生成器来尝试自学 Angular。我知道有更好的方法来做到这一点......（服务/工厂？）但我已经绞尽脑汁了几个小时，无法绕开它。

我想要一个 URL 输入和一个预先存在的广告的下拉列表。结果应使用更新的 url 输出到文本区域。相反，{{data.url}}视图助手 thingamajig 不会被替换。这是 $scope 问题吗？我需要以某种方式传递 url 的参数吗？这对服务来说是更好的工作吗？我试图转换为服务，但就我的理解而言，没有任何“点击”。

HTML：

  <div ng-controller="AdsCtrl">

  <label for="url">URL:</label>
  <input type="text" ng-model="data.url">

    <select ng-model="selected_ad" ng-options="ad.title for ad in ads">
      <option value="">Choose an ad:</option>
    </select>

    <div>
      <textarea ng-model="selected_ad.ad"></textarea>
    </div>

控制器：

var app = angular.module("MyApp", []);

app.controller('AdsCtrl', function($scope, $http) {
  $http.get('ads.json')
    .then(function(res){
      $scope.ads = res.data;
    });
});

广告示例（json）：

  {
    "title": "Business Development",
    "ad": "Go crazy making money...<br><br>Aren&apos;t you tired of being broke...<br><br>Learn all you can about making money from us...<br><br>This won&apos;t take much time at all...<br><br>To learn more <a href=\"{{data.url}}\">Click Here</a>"
  }
]

提前感谢您的帮助。

编辑：澄清一下，我正在尝试将变量（用户提供的 URL）传递到 json 字符串中。做这个的最好方式是什么？

4

1 回答 1

1

如果不将广告中的 html 编译为视图，则无法直接绑定到它。一种更简单且依赖更少的方法是自己进行替换。

将此函数添加到控制器内的范围。

$scope.getSelectedAdSnippet = function (){
  var selectedAd = $scope.selected_ad || { ad: '' };
  var replacementUrl = $scope.replacementUrl || '';
  var transformedAd = selectedAd.ad.replace('{{data.url}}', replacementUrl);
  return transformedAd;
};

并稍微改变你的看法。

<div ng-controller="AdsController">

  <label for="url">URL:</label>
  <input type="text" ng-model="replacementUrl" />

  <select ng-model="selected_ad" ng-options="ad.title for ad in ads">
    <option value="">Choose an ad:</option>
  </select>

  <div>
    {{ getSelectedAdSnippet() }}
  </div>

</div>

现在你有一些东西可以代替你。这是我为你准备的一个例子。

绑定 textarea 作为 2 路绑定，允许用户更改模型上广告代码的值。这需要一些真正的巫术才能让它像我想的那样工作，所以我选择只在 div 中显示值。您可以使用固定字体使其看起来更像代码。

于 2013-08-29T20:29:10.053 回答