獲取價值 - AngularJS

我有下面的代碼，我想接收控制器功能的自定義指令中的NG-模塊值：獲取價值 - AngularJS

的的getName函數的功能是當我試圖得到的價值..

'use strict'; 

angular 
.module('app', []) 
.controller("Controller", function ($scope) { 
$scope.getName = function() { 
return $scope.name; 
}; 
}) 
.controller("EditController", function($scope) { 
$scope.editingMode = true; 
}) 
.directive("newName", function ($parse) { 
return { 
template: 'Write name: <input type="text" ng-model="name">' 
}; 
}); 


<html ng-app="app"> 
    <head> 
    <meta charset="utf-8"> 
    <title>Angular</title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width"> 
    </head> 
    <body> 

    <div ng-controller="Controller"> 
     <h1>Hello, {{ getName() }}</h1> 

     <div ng-controller="EditController"> 
     <new-name ng-show="editingMode"></new-name> 
     </div> 
    </div> 

    </body> 
</html>

有人能幫助我嗎？

來源

2017-09-26 Hector Manuel Cabrera Villa

您getName()功能是parent控制器和您的孩子控制器覆蓋name變量（JS原型繼承），

你應該模型綁定（use dot(.) in your bindings）父作用域屬性，以避免被覆蓋。你也應該爲指令定義restrict type，並且應該從父HTML傳遞變量。

這裏正在下面的代碼：

angular 
 
    .module('app', []) 
 
    .controller("Controller", function($scope) { 
 
    $scope.name = { 
 
     n: '' 
 
    } 
 
    $scope.getName = function() { 
 
     return $scope.name.n; 
 
    }; 
 
    }) 
 
    .controller("EditController", function($scope) { 
 
    $scope.editingMode = true; 
 
    }) 
 
    .directive("newName", function($parse) { 
 
    return { 
 
     restrict: 'E', 
 
     scope: { 
 
     name: '=', 
 
     }, 
 
     template: 'Write name: <input type="text" ng-model="name">' 
 
    }; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<html ng-app="app"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Angular</title> 
 
    <meta name="description" content=""> 
 
    <meta name="viewport" content="width=device-width"> 
 
</head> 
 

 
<body> 
 

 
    <div ng-controller="Controller"> 
 
    <h1>Hello, {{ getName()}}</h1> 
 
    <div ng-controller="EditController"> 
 
     <new-name ng-show="editingMode" name="name.n"></new-name> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

FurtherI建議也沒有必要在你的代碼中2個控制器，一個就夠了，雖然，也將解決您的問題。

來源

2017-09-26 04:28:53 anoop

試試這個

<div ng-controller="Controller"> 
     <h1>Hello, {{ name }} </h1> 

     <div ng-controller="EditController"> 
      <new-name ng-show="editingMode" name="name"></new-name> 
     </div> 
    </div> 
angular 
    .module('app', []) 
    .controller("Controller", ['$scope' , function ($scope) { 
     $scope.getName = function (name) { 
      return $scope.name = name; 
     }; 

    }]) 
    .controller("EditController", function ($scope) { 
     $scope.editingMode = true; 
     $scope.$watch('name', function (newVal, oldVal) { 
      $scope.getName(newVal); 
     }); 
    }) 
    .directive("newName", function() { 

     return { 
      transclude :true, 
      restrict: 'E', 
      scope: { 
       name: '=', 
      }, 
      template: 'Write name: <input type="text" ng-model="name" >' 
     }; 
    });

來源

2017-09-26 05:23:47 yesIcan

獲取價值 - AngularJS

回答

相關問題