使用此关键字在自定义指令中绑定模型

Question

Students.html

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

    

Student.directive 模板

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

控制器

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

当我这样做时，名称（“Mahesh”）会反映在 UI 中。

我想在控制器中不注入 $scope 的情况下做同样的事情。 像这样。

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

但价值并没有体现出来。

Answer 1

您需要使用controller as 语法来做到这一点：

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