Eine einfache Anweisung zum Anzeigen des Namens des Benutzers funktioniert nicht

Ich habe ein einfaches Beispiel für benutzerdefinierte Anweisung gemacht, um den Namen einer Person anzuzeigen. Es zeigt es immer noch nicht. Kann jemand helfen?Eine einfache Anweisung zum Anzeigen des Namens des Benutzers funktioniert nicht

<html> 
<head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script> 
</head> 
<body ng-app="myApp" ng-controller="myCtrl"> 
    <person></person> 
<script> 
    //module declaration 
    var app = angular.module('myApp',[]); 
    //controller declaration 
    app.controller('myCtrl',function(){ 
     $scope.name = "Peter"; 
    }); 
    //directive declaration 
    app.directive('person',function(){ 
     return { 
     restrict: 'E', 
     template: '<div>' {{ name }} '</div>' 
     }; 
    }); 
</script> 
</body> 
</html>

Quelle

2016-04-19 Deadpool

Sie müssen nur die richtige Javascript-Syntax verwenden. Ich spreche über String-Verkettung (die Sie nicht benötigen). Sie haben auch vergessen, $scope in den Controller zu injizieren. Korrekte Syntax:

// module declaration 
 
var app = angular.module('myApp', []); 
 

 
// controller declaration 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.name = "Peter"; 
 
}); 
 

 
// directive declaration 
 
app.directive('person', function() { 
 
    return { 
 
    restrict: 'E', 
 
    template: '<div>{{name}}</div>' 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
    <person></person> 
 
</div>

Above wird für Sie arbeiten, aber das ist nur eine einfache Syntax Zeug. Wichtiger ist, dass Sie nicht solche Art von Richtlinien schreiben sollten, einfach weil sie keinen echten Wert hinzufügen. Sie hätten einfach {{name}} in Vorlage ohne Direktive schreiben können.

Jetzt nützliche Richtlinie würde wie folgt aussehen:

// module declaration 
 
var app = angular.module('myApp', []); 
 

 
// controller declaration 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.user = { 
 
    name: "Peter", 
 
    age: 12, 
 
    hobby: "Coding, reading" 
 
    }; 
 
}); 
 

 
// directive declaration 
 
app.directive('person', function() { 
 
    return { 
 
    scope: { 
 
     data: '=' 
 
    }, 
 
    template: 
 
     '<div>{{data.name}}, {{data.age}}</div>' + 
 
     '<small>{{data.hobby}}</small>' 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
    <person data="user"></person> 
 
</div>

Im obigen Beispiel, Sie Anwendungsbereich der Richtlinie zu isolieren (so wird es eine UI-Komponente), so dass es wirklich wiederverwendbar und flexibel. Bevorzugen Sie diesen Ansatz.

Quelle

2016-04-19 08:09:33 dfsq

Sehr schönes explaination! – Deadpool

Zwei Probleme:

Sie nicht $ scope in der Steuerung
Die Vorlage falsch injizieren ist

Arbeits Code-Schnipsel:

//1 Module declaration 
 
    var app = angular.module('myApp',[]); 
 
    //controller declaration 
 
    app.controller('myCtrl',function($scope){ 
 
     $scope.name = "Peter"; 
 
    }); 
 

 
//directive declaration 
 
    app.directive('person',function(){ 
 
     return { 
 
     restrict: 'E', 
 
     template: '<div>{{ name }}</div>' 
 
     }; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
    <person>{{name}}</person> 
 
</div>

Quelle

2016-04-19 08:12:04 fikkatra

index.html

<html> 
<head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script> 
    <script src="app.js"></script> 
</head> 
<body ng-app="myApp" ng-controller="myCtrl"> 
    <person></person> 

</body> 
</html>

app.js

//module declaration 
var app = angular.module('myApp',[]); 
    //controller declaration & inject $scope 
    app.controller('myCtrl',function($scope){ 
     $scope.name = "Peter"; 
    }); 

    //directive declaration 
    app.directive('person',function(){ 
    return { 
    restrict: 'E', 
     template: "<div> {{ name }}</div>" 
     }; 
    });

Quelle

2016-04-19 08:25:19

Eine einfache Anweisung zum Anzeigen des Namens des Benutzers funktioniert nicht

Antwort

Verwandte Themen