Простая директива, показывающая имя пользователя, не работающего

Я сделал простой пример пользовательской директивы, чтобы показать имя человека. Он все еще не показывает это. Может кто-нибудь помочь?Простая директива, показывающая имя пользователя, не работающего

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

В приведенном выше примере, изолировать сферу действия директивы (так он становится компонент пользовательского интерфейса), что делает его действительно многоразовые и гибкие. Предпочитайте этот подход.

источник

2016-04-19 08:09:33 dfsq

Очень хороший объяснений! – Deadpool

две проблемы:

вы не инъекционные $ объем в контроллере
Шаблон неправильно

Рабочий фрагмент кода:

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

Простая директива, показывающая имя пользователя, не работающего

ответ

Смежные вопросы