Использование свойств ссылки и шаблона в директивах - PullRequest
0 голосов
/ 31 декабря 2018
Wants to use the link function of the directive. Such that it should display a name and on click should change it to the new given name. but there is some error in my template property. w
Where do i get wrong?

JS code-
var app=angular.module("app",[]);

app.controller("myController",function($scope){

});

app.directive("myDirective",function(){
    return{
        restrict:"EA",

        link: function($scope,element,attr){
         $scope.name="Hello World";
         $scope.changeName=function(newName){
            $scope.name=newName;
         }
        },
        template: '<span ng-click="changeName('Hi!')">current name:{{name}}</span>'

    };
});

HTML code-
<hmtl>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.js"></script>
<script src="example4.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="myController">
        <div my-directive ></div>
    </div>
</body>
</hmtl>

Сначала я ограничил директиву "EA".Затем предоставил имя для Scope и функцию "changeName" для области.Затем предоставил шаблон для изменения инициализированного имени на newName при нажатии.

1 Ответ

0 голосов
/ 31 декабря 2018

просто используйте '+' hi '+'

        <!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp">
  <div ng-controller="myController">
 <w3-test-directive></w3-test-directive> </div>

<script>
var app = angular.module("myApp", []);
app.controller("myController",function($scope){

});

app.directive("w3TestDirective",function(){
    return{
        restrict:"EA",

    link: function($scope,element,attr){
     $scope.name="Hello World";
     $scope.changeName=function(newName){
        $scope.name=newName;
     }
    },
    template: '<span ng-click="changeName('+'hi'+')">current name:{{name}}</span>'

    };
});
</script>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...