2

我可以观察指令中的属性变化吗？

我有这样的事情：

<online-wathers></online-watchers>

它向视频广播显示在线连接的用户，并且需要广播 ID。显然没有这个属性是行不通的。此视频广播不是在文档准备好时开始，而是在发布者真正想要开始时开始。当他开始时-后端给了我广播ID。

现在，当 api 返回我的广播 ID 时，我只是将它附加到具有广播 ID =“xx”的 DOM。

$(".online-watchers-container")
      .html($("<online-watchers broadcast-id='"+broadcast.id+"' />"));
$(".chat-container")
      .html($("<chat broadcast-id='"+broadcast.id+"' />"));
$(".request-container")
      .html($("<live-requests broadcast-id='"+broadcast.id+"'></live-requests>"));

// compile directives
angular.bootstrap(angular.element("online-watchers, chat, live-requests"), ['MyApp']);

但是是否有任何内部方法可以观察添加或更改属性？因此，在页面加载时，我已经在 DOM 中有<online-watchers></online-watchers>，当我收到广播 ID 的响应时，我只需将属性添加到 DOM 中的元素并指令对其做出反应。

请，如果您将其视为垃圾代码，如果您展示一些更好的解决方案示例，我将不胜感激。

谢谢。

4

1 回答 1

1

是的你可以

function MyDirective() {
    return {
        link: function (scope, iElement, iAttrs) {
            scope.$watch(iAttrs.scopeProp, function (val) {
                console.log("prop: " + val);
            });
            iAttrs.$observe("interpolated", function (val) {
                console.log("interpolate: " + val);
            });
        }
    }
 }

.

<my-directive scope-prop="someId" interpolated="{{someId + 1}}"

.

function MyCtrl($scope) {
    $scope.someId = 12;
}

有关更多示例，请查看：如何在自定义指令中获取评估的属性

于 2013-03-24T22:08:58.370 回答