AngularJS - 如何触发 bindHtml 更新指令？

Question

我有一个我在这里面临的问题的例子：http://jsfiddle.net/Siyfion/JxLhX/

本质上，每当用户单击列表中的文档时，我想使用 jQuerySVG 将一些功能附加到 SVG 文档（onClick 等）。

我知道 DOM 操作不应该在控制器函数中完成，所以我尝试创建一个指令来允许我挂钩绑定更新，但它不会在我期望的时候触发它也是（仅在页面加载 atm 上一次）。

包含绑定到 SVG 的 <div> 标记具有 id='drawContainer'，也是我附加指令的位置：

<div ng-app="module" class="container-fluid">
  <div class="row-fluid" ng-controller="SheetsCtrl">
    <div class="span3 well">
      <input type="text" ng-model="query" />
      <ul class="nav nav-list">
        <li class="nav-header" ng-bind-template="Available Labels ({{getLabelCount()}})">Available Labels</li>
        <div id="sheetList">
          <li ng-repeat="label in labels | filter:query">
            <span>
              <button class="btn btn-mini btn-danger" ng-click="removeLabel(label)">
                <i class="icon-remove-sign"></i>
              </button>
              <a href="#" ng-click="getSVG(label)">{{label.Name}}</a>
            </span>
          </li>
        </div>
      </ul>
    </div>
      <div class="span9" id="drawContainer" bind-to-svg ng-bind-html-unsafe="selectedLabelDesign"/>
  </div>
</div>

​ 但是我不确定这是不是正确的做事方式，这是带有 jQ​​uerySVG 代码占位符的指令

angular.module('module', []).directive('bindToSvg', function() {
    return {
        link: function(scope, element, attrs, ctrl) {
            var svgDoc = element.children[0];
            alert('SVG Changed! (Or not, as the case may be)');
            // Attach jQuerySVG to svgDoc and register events.
        }
    };
});

function SheetsCtrl($scope, $http) {

    $scope.labels = [];
    $scope.selectedLabelDesign = null;

    $scope.labels[0] = {
        SVG: '<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /></svg>',
        Name: 'Circle'
    };

    $scope.labels[1] = {
        SVG: '<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" /></svg>',
        Name: 'Rectangle'
    };

    $scope.getLabelCount = function() {
        return $scope.labels.length;
    };

    $scope.getSVG = function(label) {
        var index = $scope.labels.indexOf(label);
        $scope.selectedLabelDesign = $scope.labels[index].SVG;
    };

    $scope.removeLabel = function(label) {
        var index = $scope.labels.indexOf(label);
        $scope.labels.splice(index, 1);
    };
}​

如果有人能在正确的方向上给我任何指示，那就太好了！

Answer 1

我不确定当它发生变化时你想让它做什么，但你可以简单地使用 $watch 来触发你需要做的任何事情。

$scope.$watch('selectedLabelDesign', function(value) {
    alert('SVG changed to: ' + value);
});

可以在您的控制器或指令中设置此手表。您的来电。