javascript - 使用此关键字在自定义指令中绑定(bind)模型

Question

学生.html

<div class="row">
    <student info="ui.Ram"></student>
</div>

    

学生指令模板

<h1>{{ui.name}}</h1>

路由配置

app.config(urlRouter);
     
       function urlRouter($routeProvider, $locationProvider) {
   
    $routeProvider
       .when('/students', {
           templateUrl: 'app/views/students.html',
           controller: 'prodCtrl',
           controllerAs: 'ui'
       })
       }

  

自定义指令

     app.directive('student', "student");

    function student() {
        var directive = {};
        directive.restrict = 'E';
        directive.templateUrl = "Student.directive.html";
        directive.scope = {
           ui : "=name"
        }
        return directive;
     });

Controller

     app.controller('StudentController', StudentController);
     
     function StudentController($scope) {
        
        $scope.Ram= {};
        $scope.Ram.name = "Mahesh";
        
     };
        

当我这样做时，名称(“Mahesh”)会反射(reflect)在 UI 中。

我正在考虑做同样的事情而不在 Controller 中注入(inject) $scope 。像这样的东西。

      function StudentController() {
        var  vm = this;
        vm.Ram= {};
        vm.Ram.name = "Mahesh";
        
       return vm;
     };

但是该值没有反射(reflect)出来。

Answer 1

您需要在 View 中使用controller as 语法来执行此操作:

  <div ng-app = "app" ng-controller = "StudentController as ctrl">
     <student name = "ctrl.Ram"></student>
  </div>