Question

基本上我已经制作了自定义指令，我将Url作为字符串传递给指令控制器，我在调用http.get()方法中创建了该指令内的内容。我想要的是能够更改annotation-url属性的值，作为回报将改变指令内的内容，因为新的Url将返回不同的JSON对象。但是当我从控制器更改annotationData时，似乎没有刷新指令。

HTML

<span ng-click="annotatonData = 'data/annotations1.json'">John</span>

 <span ng-click="annotatonData = 'data/annotations2.json'">Marry</span>

    <ng-annotate user-options="user" annotation-url="{{annotatonData}}"></ng-annotate>

控制器：

app.controller('ngAnnotationsController', ['$scope', '$http', function ($scope, $http) {

    //InIt default http get

    $scope.annotatonData = 'data/annotations1.json';

}]);

指令：

app.directive('ngAnnotate', function () {
    return {
        templateUrl: 'templates/...',
        restrict: 'E',
        scope: {
            annotationUrl: "@"

        },
        controller: ['$scope', '$http', function ($scope, $http) {

            $http.get($scope.annotationUrl).then(function (response) {
                $scope.data = response.data;
                 ...
                 ...

Answer 1

首先，我建议你改为

scope: {
    annotationUrl: "="
}

您可以添加观察者，以便在值发生变化时调用$http

$scope.$watch('annotationUrl', function(newVal, oldVal) {
    if (newVal != oldVal) {
       $http.get(newVal).then(function (response) {
            $scope.data = response.data;
             ...
             ...
    }
}

但是，如果您想保持annotationUrl不变，则需要使用 $attr.$observe('annotationUrl', fn)抓住价值变化。

动态更改应更改指令内容的自定义指令属性值

1 个答案: