AngularJS指令不会在范围变量更改时更新

68

我尝试编写一个小指令，以将其内容包装在另一个模板文件中。

这段代码：

<layout name="Default">My cool content</layout>

应该具有以下输出：

<div class="layoutDefault">My cool content</div>

因为布局“默认”具有以下代码：

<div class="layoutDefault">{{content}}</div>

指令的代码如下：

app.directive('layout', function($http, $compile){
return {
    restrict: 'E',
    link: function(scope, element, attributes) {
        var layoutName = (angular.isDefined(attributes.name)) ? attributes.name : 'Default';
        $http.get(scope.constants.pathLayouts + layoutName + '.html')
            .success(function(layout){
                var regexp = /^([\s\S]*?){{content}}([\s\S]*)$/g;
                var result = regexp.exec(layout);

                var templateWithLayout = result[1] + element.html() + result[2];
                element.html($compile(templateWithLayout)(scope));
            });
    }
}

}）;

我的问题：

例如，当我在模板（在布局模板中或在布局标签内部）使用范围变量时。{{whatever}}它只是最初工作。如果我更新whatever变量，则该指令不再更新。整个链接功能只会被触发一次。

我认为AngularJS不知道，该指令使用范围变量，因此不会被更新。但是我不知道如何解决此问题。

javascript  angularjs  angularjs-directive  angularjs-scope 
— 阿明
source
2
当前的答案似乎都没有解决为什么$compile手表（在使用时）不会自动设置的问题。正如您所说的，它最初必定会出现……
— Davin Tryon 2013年
我发现了另一个解决方案，可以使用template和ng-transclude。效果很好-始终如此。唯一的问题是，我不知道如何使布局模板本身可配置。如果我将ng-include与作用域函数一起使用以获取模板路径，则会收到ngTransclude：orphan错误。
— 阿明2013年
1
好的，我找到了一种动态更改templateUrl的解决方案。请参阅下面的我自己的答案。
— 阿明2013年

Answers:

85

您应该创建一个绑定范围变量并观察其更改：

return {
   restrict: 'E',
   scope: {
     name: '='
   },
   link: function(scope) {
     scope.$watch('name', function() {
        // all the code here...
     });
   }
};
— 夸克
source
6
样式提示：正确的变量名应为scopeand not $scope。在link函数内部，作用域是一个普通变量。
— adelriosantiago
41

我也需要针对此问题的解决方案，并且我使用了该线程中的答案来提出以下内容：

.directive('tpReport', ['$parse', '$http', '$compile', '$templateCache', function($parse, $http, $compile, $templateCache)
    {
        var getTemplateUrl = function(type)
        {
            var templateUrl = '';

            switch (type)
            {
                case 1: // Table
                    templateUrl = 'modules/tpReport/directives/table-report.tpl.html';
                    break;
                case 0:
                    templateUrl = 'modules/tpReport/directives/default.tpl.html';
                    break;
                default:
                    templateUrl = '';
                    console.log("Type not defined for tpReport");
                    break;
            }

            return templateUrl;
        };

        var linker = function (scope, element, attrs)
        {

            scope.$watch('data', function(){
                var templateUrl = getTemplateUrl(scope.data[0].typeID);
                var data = $templateCache.get(templateUrl);
                element.html(data);
                $compile(element.contents())(scope);

            });



        };

        return {
            controller: 'tpReportCtrl',
            template: '<div>{{data}}</div>',
            // Remove all existing content of the directive.
            transclude: true,
            restrict: "E",
            scope: {
                data: '='
            },
            link: linker
        };
    }])
    ;

包含在您的html中：

<tp-report data='data'></tp-report>

此伪指令用于基于从服务器检索的数据集动态加载报告模板。

它在scope.data属性上设置了一个监视，每当它更新时（当用户从​​服务器请求新的数据集时），它将加载相应的指令以显示数据。

— 罗伊·米尔德（Roy Milder）
source
$ watch（）函数！总是要恢复。!!
— JayKandari '16
17

您需要告诉Angular您的指令使用了范围变量：

您需要将范围的某些属性绑定到指令：

return {
    restrict: 'E',
    scope: {
      whatever: '='
    },
   ...
}

然后$watch：

  $scope.$watch('whatever', function(value) {
    // do something with the new value
  });

有关更多信息，请参阅Angular文档中的指令。

— 保罗·穆格尔
source
8

我找到了一个更好的解决方案：

app.directive('layout', function(){
    var settings = {
        restrict: 'E',
        transclude: true,
        templateUrl: function(element, attributes){
            var layoutName = (angular.isDefined(attributes.name)) ? attributes.name : 'Default';
            return constants.pathLayouts + layoutName + '.html';
        }
    }
    return settings;
});

我目前看到的唯一缺点是，包含在内的模板具有自己的作用域。他们从父母那里获得了价值，但没有改变父母的价值，而是将价值存储在自己的新的子范围内。为避免这种情况，我现在使用$parent.whatever代替whatever。

例：

<layout name="Default">
    <layout name="AnotherNestedLayout">
        <label>Whatever:</label>
        <input type="text" ng-model="$parent.whatever">
    </layout>
</layout>
— 阿明
source
2

您应该注意一下示波器。

这是您可以执行的操作：

<layout layoutId="myScope"></layout>

您的指令应如下所示

app.directive('layout', function($http, $compile){
    return {
        restrict: 'E',
        scope: {
            layoutId: "=layoutId"
        },
        link: function(scope, element, attributes) {
            var layoutName = (angular.isDefined(attributes.name)) ? attributes.name : 'Default';
            $http.get(scope.constants.pathLayouts + layoutName + '.html')
                .success(function(layout){
                    var regexp = /^([\s\S]*?){{content}}([\s\S]*)$/g;
                    var result = regexp.exec(layout);

                    var templateWithLayout = result[1] + element.html() + result[2];
                    element.html($compile(templateWithLayout)(scope));
        });
    }
}

$scope.$watch('myScope',function(){
        //Do Whatever you want
    },true)

同样，您可以在指令中进行建模，因此，如果模型自动更新，则watch方法将更新您的指令。

— 阿迪亚·塞西（Aditya Sethi）
source
关键是在范围变量上使用=并将$ watch的第三参数设置为true。（在范围变量上注意@无效）
— Shih-Min Lee
2

我知道这是一个古老的话题，但万一有人发现像我这样的话：

当我的指令需要在“父范围”更新时更新值时，使用了以下代码。如果做错了什么，请尽力纠正我，因为我仍在学习角度，但这确实满足了我的需要。

指示： 

directive('dateRangePrint', function(){
    return {
        restrict: 'E',
        scope:{
        //still using the single dir binding
            From: '@rangeFrom',
            To: '@rangeTo',
            format: '@format'
        },
        controller: function($scope, $element){

            $scope.viewFrom = function(){
                    return formatDate($scope.From, $scope.format);
                }

            $scope.viewTo = function(){
                    return formatDate($scope.To, $scope.format);
                }

            function formatDate(date, format){
                format = format || 'DD-MM-YYYY';

                //do stuff to date...

                return date.format(format);
            }

        },
        replace: true,
        // note the parenthesis after scope var
        template: '<span>{{ viewFrom() }} - {{ viewTo() }}</span>'
    }
})
— lap
source
0

一个简单的解决方案是使范围变量成为对象。然后使用访问内容{{ whatever-object.whatever-property }}。该变量未更新，因为JavaScript通过值传递基本类型。而对象是通过引用传递来解决的。

— 哟他
source
-1

我不知道为什么没有人还没有提出bindToController这消除这些丑陋scopes and $watches.如果您正在使用Angular 1.4

下面是一个示例DOM：

<div ng-app="app">
    <div ng-controller="MainCtrl as vm">
        {{ vm.name }}
        <foo-directive name="vm.name"></foo-directive>
        <button ng-click="vm.changeScopeValue()">
        changeScopeValue
        </button>
    </div>
</div>

遵循controller代码：

angular.module('app', []);

// main.js
function MainCtrl() {
    this.name = 'Vinoth Initial';
    this.changeScopeValue = function(){
        this.name = "Vinoth has Changed"
    }
}

angular
    .module('app')
    .controller('MainCtrl', MainCtrl);

// foo.js
function FooDirCtrl() {
}

function fooDirective() {
    return {
        restrict: 'E',
        scope: {
            name: '='
        },
        controller: 'FooDirCtrl',
        controllerAs: 'vm',
        template:'<div><input ng-model="name"></div>',
        bindToController: true
    };
}

angular
    .module('app')
    .directive('fooDirective', fooDirective)
    .controller('FooDirCtrl', FooDirCtrl);

一个小提琴演奏，在这里我们正在controller自动更改的范围值directive updates on scope change。 http://jsfiddle.net/spechackers/1ywL3fnq/

— 塔莱瓦尔
source
1
您甚至没有在示例中使用bindToController。
— Suamere
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.