作業していないユーザーの名前を表示する単純なディレクティブ

人の名前を示すカスタムディレクティブの簡単な例を作成しました。まだ表示されていません。助けてもらえますか？作業していないユーザーの名前を表示する単純なディレクティブ

<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>

出典

2016-04-19 Deadpool

適切なJavascript構文を使用するだけです。私は文字列の連結について話しています（これは必要ありません）。コントローラに$scopeを注入するのを忘れた。正しい構文：

// 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>

上記はあなたのために働くだろうが、これは単純な構文のものです。もっと重要なのは、はのような命令を書くべきではないということです。あなたはちょうど指示なしで{{name}}をテンプレートに書いたかもしれません。

は今便利ディレクティブは、このようになります：

// 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>

上記の例では

は、あなたがディレクティブのスコープを隔離する（それがUIコンポーネントになります）、それを作ります真に再利用可能で柔軟性があります。このアプローチを推奨します。

出典

2016-04-19 08:09:33 dfsq

非常に素晴らしい、について説明！ – Deadpool

2つの問題：

は

あなたは、コントローラで$スコープを挿入していない
テンプレートが間違っている

の作業のコードスニペット：

//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>

出典

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>" 
     }; 
    });

出典

2016-04-19 08:25:19

作業していないユーザーの名前を表示する単純なディレクティブ

答えて

関連する問題