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

Question

基本上，我做了自定义指令，将Url作为字符串传递给它，然后在指令控制器中调用http.get()方法，该方法在该指令中创建内容。我想要的是能够更改annotation-url属性值，作为回报，它将改变指令中的内容，因为新的JSON将返回不同的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)来捕获值更改。