使用angular中的指令按下按钮时更改文本值

Question

这是我的fiddle

我基本上希望能够在按下按钮时更改文本。我在$observe内尝试了$watch和link，但我仍然没有设法让它发挥作用。

代码：

(function(){

    angular.module('app', [])


    .directive('testDirective', function(){
        return {
            restrict: 'E',
            scope: {
                title: '@'
            },
            template: '<div>this is a {{ title }}</div>',
            link: function(scope, element, attrs) {
                //?
            }
        };
    });

})()

Answer 1

您需要将数据作为范围变量传递，如果要跟踪更改，则不应将其作为字符串传递。

选中此fiddle，将计数器数据替换为您想要的数据。希望这有帮助

<div ng-controller='myctrl'>
    <test-directive title="counter"></test-directive>
    <hr></hr>
    <button type="button" ng-click = 'onclickbutton()'>Change names</button>
</div>

(function(){      

    angular.module('app', [])
    .controller('myctrl',function($scope){
        $scope.counter = 0;
        $scope.onclickbutton = function(){
           $scope.counter++;             
        }        
    })

    .directive('testDirective', function(){
        return {
            restrict: 'E',
            scope: {
                title: '='
            },
            template: '<div>this is a {{ title }}</div>',
            link: function(scope, element, attrs) {

            }
        };
    });

})();